RP/chat.html at main · Nyvera/RP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chat</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/@mlc-ai/web-llm"></script>
  <style>
    .typing-indicator span {
      display:inline-block;
      width:8px;
      height:8px;
      margin:0 2px;
      background:white;
      border-radius:50%;
      animation: blink 1.4s infinite both;
    }
    .typing-indicator span:nth-child(2) { animation-delay:0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay:0.4s; }
    @keyframes blink {
      0%, 80%, 100% { opacity:0; }
      40% { opacity:1; }
    }
  </style>
</head>
<body class="bg-gray-950 text-white min-h-screen flex flex-col">
  <header id="chatHeader" class="p-4 bg-gray-900 shadow text-lg font-bold">Chat</header>

  <main id="chatBox" class="flex-grow overflow-y-auto p-6 space-y-4"></main>

  <form id="chatForm" class="p-4 bg-gray-900 flex gap-2">
    <input id="userInput" type="text" placeholder="Type your message..."
      class="flex-grow p-2 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none" />
    <button class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-medium">Send</button>
  </form>

  <script type="module">
    import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";

    let persona = null;
    let messagesHistory = [];
    let engine = null;

    const chatBox = document.getElementById("chatBox");
    const chatHeader = document.getElementById("chatHeader");
    const chatForm = document.getElementById("chatForm");
    const userInput = document.getElementById("userInput");

    // Format text: Markdown + <think>
    function formatText(text) {
      const withThink = text.replace(/<think>(.*?)<\/think>/gs, "<i>$1</i>");
      let md = withThink
        .replace(/\*\*(.*?)\*\*/g, "<b>$1</b>")
        .replace(/`(.*?)`/g, "<code>$1</code>")
        .replace(/\*(.*?)\*/g, "<i>$1</i>");
      md = md.replace(/\n/g, "<br>");
      return md;
    }

    function appendMessage(sender, text) {
      const msgDiv = document.createElement("div");
      msgDiv.className = sender === "user"
        ? "bg-blue-600 p-3 rounded-lg self-end max-w-lg ml-auto whitespace-pre-wrap"
        : "bg-gray-800 p-3 rounded-lg self-start max-w-lg whitespace-pre-wrap";
      msgDiv.innerHTML = formatText(text);
      chatBox.appendChild(msgDiv);
      chatBox.scrollTop = chatBox.scrollHeight;
    }

    // Typing indicator
    function showTypingIndicator() {
      const div = document.createElement("div");
      div.className = "bg-gray-800 p-3 rounded-lg self-start max-w-lg typing-indicator";
      div.innerHTML = '<span></span><span></span><span></span>';
      chatBox.appendChild(div);
      chatBox.scrollTop = chatBox.scrollHeight;
      return div;
    }

    function removeTypingIndicator(indicator) {
      if (indicator) chatBox.removeChild(indicator);
    }

    // Persistence: load & save
    function saveHistory() {
      if (!persona) return;
      const key = "chat_history_" + persona.id;
      localStorage.setItem(key, JSON.stringify(messagesHistory));
    }

    function loadHistory() {
      if (!persona) return;
      const key = "chat_history_" + persona.id;
      const json = localStorage.getItem(key);
      if (json) {
        try {
          const arr = JSON.parse(json);
          if (Array.isArray(arr)) {
            messagesHistory = arr;
            for (const msg of messagesHistory) {
              if (msg.role === "user") appendMessage("user", msg.content);
              else if (msg.role === "assistant") appendMessage("ai", msg.content);
            }
          }
        } catch {}
      }
    }

    // Load persona from URL
    async function loadPersona() {
      const params = new URLSearchParams(window.location.search);
      const personaId = params.get("persona");
      const res = await fetch("personas.json");
      const personas = await res.json();
      persona = personas.find(p => p.id === personaId);
      if (!persona) {
        alert("Persona not found");
        throw new Error("Persona not found");
      }
      document.title = persona.name + " – Chat";
      chatHeader.textContent = "Chat with " + persona.name;

      loadHistory();

      if (!messagesHistory.some(m => m.role === "system")) {
        messagesHistory.push({ role: "system", content: persona.system });
        appendMessage("ai", `You are now chatting with **${persona.name}**`);
      }
    }

    // Initialize model
    async function initEngine() {
      appendMessage("ai", "⏳ Loading model...");
      engine = await CreateMLCEngine("Llama-3.2-1B-Instruct-q4f16_1-MLC", {
        initProgressCallback: (p) => { console.debug("Load progress:", p); }
      });
      appendMessage("ai", "✅ Model loaded. You can start chatting!");
    }

    // Streaming AI reply
    async function aiReplyStream(userMsg) {
      messagesHistory.push({ role: "user", content: userMsg });

      const indicator = showTypingIndicator();

      const stream = await engine.chat.completions.create({
        messages: messagesHistory,
        temperature: 0.8,
        stream: true,
        max_tokens: 1024
      });

      let assistantDiv = null;
      let cumulated = "";

      for await (const chunk of stream) {
        const delta = chunk?.choices?.[0]?.delta?.content || "";
        cumulated += delta;

        if (!assistantDiv) {
          assistantDiv = document.createElement("div");
          assistantDiv.className = "bg-gray-800 p-3 rounded-lg self-start max-w-lg whitespace-pre-wrap";
          chatBox.appendChild(assistantDiv);
        }
        assistantDiv.innerHTML = formatText(cumulated);
        chatBox.scrollTop = chatBox.scrollHeight;
      }

      removeTypingIndicator(indicator);

      messagesHistory.push({ role: "assistant", content: cumulated });
      saveHistory();
    }

    chatForm.addEventListener("submit", async (ev) => {
      ev.preventDefault();
      const txt = userInput.value.trim();
      if (!txt) return;
      appendMessage("user", txt);
      userInput.value = "";
      await aiReplyStream(txt);
    });

    // Boot
    await loadPersona();
    await initEngine();
  </script>
</body>
</html>