Spaces:

kawasumi
/

Tema_Q-R4.2-Chat

Running

App Files Files Community

kawasumi commited on 8 days ago

Commit

2c082ce

verified ·

1 Parent(s): b960bac

Update index.html

Browse files

Files changed (1) hide show

index.html +230 -19

index.html CHANGED Viewed

@@ -1,19 +1,230 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tema_Q-X-Chat</title>
+    <style>
+        :root { --background-color: #fff; --header-bg: #fff; --chat-bg: #fff; --input-bg: #f5f5f5; --input-shadow: rgba(0, 0, 0, 0.1); --user-message-bg: #0084ff; --user-message-color: #fff; --bot-message-bg: #f5f5f5; --bot-message-color: #000; --text-color: #000; --send-button-bg: #000; --send-button-color: #fff; --send-button-disabled-bg: #ccc; --send-button-stop-bg: #d32f2f; --new-chat-button-bg: #999; --new-chat-button-color: #fff; --code-bg: #2d2d2d; --code-color: #f8f8f2; }
+        [data-theme="dark"] { --background-color: #1e1e1e; --header-bg: #2a2a2a; --chat-bg: #1e1e1e; --input-bg: #333; --input-shadow: rgba(0, 0, 0, 0.3); --user-message-bg: #005bb5; --user-message-color: #fff; --bot-message-bg: #444; --bot-message-color: #ddd; --text-color: #ddd; --send-button-bg: #555; --send-button-color: #fff; --send-button-disabled-bg: #666; --send-button-stop-bg: #e57373; --new-chat-button-bg: #666; --new-chat-button-color: #fff; --code-bg: #1a1a1a; --code-color: #f8f8f2; }
+        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: var(--background-color); color: var(--text-color); display: flex; flex-direction: column; height: 100vh; overflow: hidden; -webkit-overflow-scrolling: touch; touch-action: manipulation; }
+        .header { background-color: var(--header-bg); padding: 10px; display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; position: fixed; top: 0; right: 0; width: 100%; z-index: 20; }
+        #new-chat-button, #theme-toggle-button { background-color: var(--new-chat-button-bg); color: var(--new-chat-button-color); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 10px; font-size: 20px; }
+        #theme-toggle-button img { width: 20px; height: 20px; object-fit: contain; }
+        .chat-container { flex: 1; width: 100%; max-width: 100%; display: flex; flex-direction: column; background-color: var(--chat-bg); position: relative; overflow: hidden; padding-top: 52px; }
+        .chat-messages { flex: 1; padding: 10px; padding-bottom: 100px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
+        .message { margin-bottom: 10px; display: flex; flex-direction: column; }
+        .message.user { align-items: flex-end; }
+        .message.bot { align-items: flex-start; }
+        .message-content { max-width: 80%; padding: 8px 12px; border-radius: 6px; font-size: 16px; line-height: 1.6; }
+        .message.user .message-content { background-color: var(--user-message-bg); color: var(--user-message-color); white-space: pre-wrap; word-wrap: break-word; }
+        .message.bot .message-content { background-color: var(--bot-message-bg); color: var(--bot-message-color); white-space: pre-wrap; word-wrap: break-word; text-align: left; }
+        .status-info { font-size: 11px; color: #888; margin-top: 4px; padding-left: 12px; font-family: monospace; }
+        [data-theme="dark"] .status-info { color: #aaa; }
+        .message.bot pre { background-color: var(--code-bg); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; white-space: pre; }
+        .message.bot code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: var(--code-color); font-size: 14px; }
+        .message.bot :not(pre) > code { background-color: var(--code-bg); padding: 2px 5px; border-radius: 3px; font-size: 90%; white-space: pre-wrap; }
+        .input-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; z-index: 10; }
+        .input-wrapper { display: flex; align-items: center; background-color: var(--input-bg); border-radius: 20px; padding: 8px 12px; box-shadow: 0 2px 5px var(--input-shadow); min-height: 40px; }
+        #user-input { flex: 1; padding: 8px; border: none; background: transparent; font-size: 16px; outline: none; resize: none; min-height: 24px; max-height: 120px; overflow-y: auto; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; align-self: center; color: var(--text-color); }
+        #send-button { width: 30px; height: 30px; background-color: var(--send-button-bg); color: var(--send-button-color); border: none; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; transition: background-color 0.2s; }
+        #send-button:disabled { background-color: var(--send-button-disabled-bg); cursor: not-allowed; }
+        #send-button.stop-mode { background-color: var(--send-button-stop-bg); font-size: 12px; }
+        #welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: var(--text-color); z-index: 5; pointer-events: none; }
+    </style>
+</head>
+<body data-theme="light">
+    <div class="header">
+        <button id="theme-toggle-button" title="ダークモード切り替え"><img src="1.png" alt="ライトモード" id="theme-icon"></button>
+        <button id="new-chat-button" title="新しいチャットを開始">↻</button>
+    </div>
+    <div class="chat-container">
+        <div class="chat-messages" id="chat-messages"></div>
+        <div id="welcome-text">Tema_Q-X</div>
+        <div class="input-container">
+            <div class="input-wrapper">
+                <textarea id="user-input" placeholder="モデルをロード中..." disabled></textarea>
+                <button id="send-button" disabled>↑</button>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendButton = document.getElementById('send-button');
+        const welcomeText = document.getElementById('welcome-text');
+        const themeToggleButton = document.getElementById('theme-toggle-button');
+        const newChatButton = document.getElementById('new-chat-button');
+        const body = document.body;
+        const themeIcon = document.getElementById('theme-icon');
+        let engine;
+        let isGenerating = false;
+        let messages = [];
+        async function initWebLLM() {
+            const modelId = "Tema-Q-X-MLC";
+            const appConfig = {
+                model_list: [{
+                    model_id: modelId,
+                    model: "https://huggingface.co/kawasumi/Tema-Q-R4.2-MLC/resolve/main/",
+                    model_lib: "https://raw.githubusercontent.com/mlc-ai/binary-mlc-llm-libs/main/web-llm-models/v0_2_80/gemma-2-9b-it-q4f16_1-ctx4k_cs1k-webgpu.wasm",
+                }]
+            };
+            const statusDiv = addMessage("Tema Q-X モデルロード中...", "bot");
+            try {
+                engine = await CreateMLCEngine(modelId, {
+                    appConfig,
+                    initProgressCallback: (report) => {
+                        statusDiv.textContent = `ロード中: ${report.text} (${(report.progress * 100).toFixed(1)}%)`;
+                    }
+                });
+                statusDiv.parentElement.remove();
+                userInput.placeholder = "メッセージを入力...";
+                userInput.disabled = false;
+                checkInput();
+            } catch (err) {
+                statusDiv.textContent = "エラー: モデルロード失敗。ブラウザコンソールを確認してください。";
+                console.error(err);
+            }
+        }
+        function parseMarkdown(text) {
+            if (!text) return '';
+            let html = text
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+            html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
+            html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
+            html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
+            html = html.replace(/^\s*[-*+]\s/gm, '• ');
+            html = html.replace(/```(\w*)?\n?([\s\S]*?)```/g, (m, lang, code) => `<pre><code>${code.trim()}</code></pre>`);
+            html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+            html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+            html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+            return html;
+        }
+        function setGeneratingState(generating) {
+            isGenerating = generating;
+            sendButton.textContent = generating ? '■' : '↑';
+            sendButton.classList.toggle('stop-mode', generating);
+            sendButton.disabled = false;
+            if (!generating) checkInput();
+        }
+        async function sendMessage() {
+            if (isGenerating) {
+                await engine.interruptGenerate?.();
+                setGeneratingState(false);
+                return;
+            }
+            const message = userInput.value.trim();
+            if (!message || !engine) return;
+            userInput.value = '';
+            userInput.style.height = 'auto';
+            welcomeText.style.display = 'none';
+            checkInput();
+            addMessage(message, 'user');
+            messages.push({ role: "user", content: message });
+            const botContentDiv = addMessage('', 'bot');
+            const statusDiv = document.createElement('div');
+            statusDiv.className = 'status-info';
+            botContentDiv.parentNode.appendChild(statusDiv);
+            let fullBotText = '';
+            setGeneratingState(true);
+            try {
+                const completion = await engine.chat.completions.create({
+                    messages,
+                    stream: true,
+                    temperature: 0.7,
+                });
+                for await (const chunk of completion) {
+                    const curText = chunk.choices[0]?.delta.content || "";
+                    fullBotText += curText;
+                    botContentDiv.innerHTML = parseMarkdown(fullBotText);
+                    if (chunk.usage?.extra?.decode_tokens_per_s) {
+                        const tps = chunk.usage.extra.decode_tokens_per_s.toFixed(1);
+                        statusDiv.textContent = `${tps} tokens/s | ${chunk.usage.total_tokens ?? 0} tokens`;
+                    }
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }
+                messages.push({ role: "assistant", content: fullBotText });
+            } catch (error) {
+                botContentDiv.innerHTML += '<br><span style="color:red;">エラーが発生しました。</span>';
+                console.error(error);
+            } finally {
+                setGeneratingState(false);
+            }
+        }
+        function addMessage(text, sender) {
+            const messageDiv = document.createElement('div');
+            messageDiv.classList.add('message', sender);
+            const contentDiv = document.createElement('div');
+            contentDiv.classList.add('message-content');
+            if (sender === 'user') contentDiv.textContent = text;
+            else contentDiv.innerHTML = parseMarkdown(text);
+            messageDiv.appendChild(contentDiv);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return contentDiv;
+        }
+        function checkInput() {
+            if (!isGenerating) sendButton.disabled = userInput.value.trim().length === 0;
+        }
+        userInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = this.scrollHeight + 'px';
+            checkInput();
+        });
+        userInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (!isGenerating && !sendButton.disabled) sendMessage();
+            }
+        });
+        sendButton.addEventListener('click', sendMessage);
+        newChatButton.addEventListener('click', async () => {
+            if (isGenerating) await engine.interruptGenerate?.();
+            chatMessages.innerHTML = '';
+            messages = [];
+            welcomeText.style.display = 'block';
+            userInput.value = '';
+            setGeneratingState(false);
+            if (engine) await engine.resetChat();
+        });
+        themeToggleButton.addEventListener('click', () => {
+            const isLight = body.getAttribute('data-theme') === 'light';
+            body.setAttribute('data-theme', isLight ? 'dark' : 'light');
+            themeIcon.src = isLight ? '2.png' : '1.png';
+            themeIcon.alt = isLight ? 'ダークモード' : 'ライトモード';
+        });
+        initWebLLM();
+    </script>
+</body>
+</html>