Create static/index.html
Browse files- static/index.html +80 -0
static/index.html
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="zh-Hant" class="h-full bg-gray-50 dark:bg-gray-900">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<title>Qwen2.5‑1.5B‑Instruct – 繁體中文聊天</title>
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 7 |
+
|
| 8 |
+
<!-- Tailwind CDN (just‑in‑time) -->
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
|
| 11 |
+
<!-- Alpine.js – tiny reactivity (no build step) -->
|
| 12 |
+
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
| 13 |
+
|
| 14 |
+
<!-- Custom CSS (optional tweaks) -->
|
| 15 |
+
<link rel="stylesheet" href="/static/style.css">
|
| 16 |
+
</head>
|
| 17 |
+
|
| 18 |
+
<body class="flex flex-col h-full" x-data="chatApp()">
|
| 19 |
+
<!-- Header -->
|
| 20 |
+
<header class="bg-white dark:bg-gray-800 shadow p-4 flex items-center justify-between">
|
| 21 |
+
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">
|
| 22 |
+
Qwen2.5‑1.5B‑Instruct <span class="text-sm font-normal text-gray-500 dark:text-gray-400">（繁體中文）</span>
|
| 23 |
+
</h1>
|
| 24 |
+
|
| 25 |
+
<!-- Dark‑mode toggle -->
|
| 26 |
+
<button @click="toggleDark()" class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
|
| 27 |
+
<svg x-show="!dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800" fill="none"
|
| 28 |
+
viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round"
|
| 29 |
+
stroke-linejoin="round" stroke-width="2"
|
| 30 |
+
d="M12 3v1m0 16v1m8.66-9.66l-.71.71M4.05 19.95l-.71-.71M21 12h-1M4 12H3m15.36 5.36l-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 100 14 7 7 0 000-14z"/></svg>
|
| 31 |
+
<svg x-show="dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="none"
|
| 32 |
+
viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round"
|
| 33 |
+
stroke-linejoin="round" stroke-width="2"
|
| 34 |
+
d="M12 3v1m0 16v1m8.66-9.66l-.71.71M4.05 19.95l-.71-.71M21 12h-1M4 12H3m15.36 5.36l-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 100 14 7 7 0 000-14z"/></svg>
|
| 35 |
+
</button>
|
| 36 |
+
</header>
|
| 37 |
+
|
| 38 |
+
<!-- Chat window -->
|
| 39 |
+
<main class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-window">
|
| 40 |
+
<template x-for="msg in messages" :key="msg.id">
|
| 41 |
+
<div :class="msg.role === 'assistant' ? 'flex justify-start' : 'flex justify-end'">
|
| 42 |
+
<div class="max-w-xl rounded-lg p-3 text-sm"
|
| 43 |
+
:class="msg.role === 'assistant' ?
|
| 44 |
+
'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100' :
|
| 45 |
+
'bg-blue-600 text-white'">
|
| 46 |
+
<p x-html="msg.content"></p>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</template>
|
| 50 |
+
|
| 51 |
+
<!-- Loading indicator -->
|
| 52 |
+
<div x-show="loading" class="flex justify-start">
|
| 53 |
+
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-600 dark:text-gray-300">
|
| 54 |
+
<span class="animate-pulse">思考中…</span>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
</main>
|
| 58 |
+
|
| 59 |
+
<!-- Input bar -->
|
| 60 |
+
<footer class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
| 61 |
+
<form @submit.prevent="sendMessage()" class="flex gap-2">
|
| 62 |
+
<textarea x-model="userInput"
|
| 63 |
+
rows="1"
|
| 64 |
+
placeholder="在此輸入訊息…"
|
| 65 |
+
class="flex-1 rounded-md border border-gray-300 dark:border-gray-600 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-100 resize-none"
|
| 66 |
+
@keydown.enter.exact.prevent="sendMessage()"
|
| 67 |
+
@input="autoResize($event)"></textarea>
|
| 68 |
+
|
| 69 |
+
<button type="submit"
|
| 70 |
+
class="bg-blue-600 hover:bg-blue-700 text-white rounded-md px-4 py-2 disabled:opacity-50"
|
| 71 |
+
:disabled="loading || userInput.trim() === ''">
|
| 72 |
+
送出
|
| 73 |
+
</button>
|
| 74 |
+
</form>
|
| 75 |
+
</footer>
|
| 76 |
+
|
| 77 |
+
<!-- Alpine.js component -->
|
| 78 |
+
<script src="/static/script.js"></script>
|
| 79 |
+
</body>
|
| 80 |
+
</html>
|