| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ask Miku</title> |
| <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| background: linear-gradient(135deg, #39C6C6 0%, #4EC7CF 50%, #00A3AF 100%); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| } |
| |
| .container { |
| width: 100%; |
| max-width: 800px; |
| height: 90vh; |
| max-height: 700px; |
| background: white; |
| border-radius: 16px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #39C6C6 0%, #4EC7CF 50%, #00A3AF 100%); |
| color: white; |
| padding: 20px; |
| text-align: center; |
| position: relative; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @keyframes shimmer { |
| 0% { background-position: -200px 0; } |
| 100% { background-position: calc(200px + 100%) 0; } |
| } |
| |
| .header h1 { |
| font-size: 24px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
| |
| .status { |
| font-size: 14px; |
| opacity: 0.9; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| } |
| |
| .status-indicator { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #FF92E1; |
| animation: pulse 2s infinite; |
| } |
| |
| .status-indicator.ready { |
| background: #39C6C6; |
| animation: none; |
| } |
| |
| .status-indicator.error { |
| background: #FF4081; |
| animation: none; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| |
| .chat-container { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px; |
| background: #f9fafb; |
| } |
| |
| .message { |
| margin-bottom: 16px; |
| display: flex; |
| gap: 12px; |
| animation: slideIn 0.3s ease-out; |
| } |
| |
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .message.user { |
| flex-direction: row-reverse; |
| } |
| |
| .message-avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 18px; |
| flex-shrink: 0; |
| } |
| |
| .message.user .message-avatar { |
| background: linear-gradient(135deg, #39C6C6 0%, #4EC7CF 50%, #00A3AF 100%); |
| } |
| |
| .message.assistant .message-avatar { |
| background: #e5e7eb; |
| } |
| |
| .message-content { |
| max-width: 70%; |
| padding: 12px 16px; |
| border-radius: 12px; |
| line-height: 1.5; |
| word-wrap: break-word; |
| } |
| |
| .message.user .message-content { |
| background: linear-gradient(135deg, #39C6C6 0%, #4EC7CF 50%, #00A3AF 100%); |
| color: white; |
| } |
| |
| .message.assistant .message-content { |
| background: white; |
| color: #1f2937; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| border-left: 3px solid #39C6C6; |
| } |
| |
| .message-content { |
| font-size: 15px; |
| } |
| |
| .message-content p { |
| margin-bottom: 12px; |
| } |
| |
| .message-content p:last-child { |
| margin-bottom: 0; |
| } |
| |
| .message-content code { |
| background: rgba(0, 0, 0, 0.05); |
| padding: 2px 4px; |
| border-radius: 4px; |
| font-family: 'Courier New', Courier, monospace; |
| font-size: 0.9em; |
| } |
| |
| .message-content pre { |
| background: #f3f4f6; |
| padding: 12px; |
| border-radius: 8px; |
| overflow-x: auto; |
| margin: 12px 0; |
| border: 1px solid #e5e7eb; |
| } |
| |
| .message-content pre code { |
| background: transparent; |
| padding: 0; |
| font-family: 'Courier New', Courier, monospace; |
| } |
| |
| .message-content ul, .message-content ol { |
| margin-left: 20px; |
| margin-bottom: 12px; |
| } |
| |
| .message-content li { |
| margin-bottom: 4px; |
| } |
| |
| .message-content table { |
| border-collapse: collapse; |
| width: 100%; |
| margin-bottom: 12px; |
| } |
| |
| .message-content th, .message-content td { |
| border: 1px solid #e5e7eb; |
| padding: 8px; |
| text-align: left; |
| } |
| |
| .message-content th { |
| background: #f3f4f6; |
| } |
| |
| .input-container { |
| padding: 20px; |
| background: white; |
| border-top: 1px solid #e5e7eb; |
| display: flex; |
| gap: 12px; |
| } |
| |
| .input-field { |
| flex: 1; |
| padding: 12px 16px; |
| border: 2px solid #e5e7eb; |
| border-radius: 24px; |
| font-size: 15px; |
| outline: none; |
| transition: border-color 0.2s; |
| } |
| |
| .input-field:focus { |
| border-color: #39C6C6; |
| } |
| |
| .input-field:disabled { |
| background: #f3f4f6; |
| cursor: not-allowed; |
| } |
| |
| .send-button { |
| padding: 12px 28px; |
| background: linear-gradient(135deg, #39C6C6 0%, #4EC7CF 50%, #00A3AF 100%); |
| color: white; |
| border: none; |
| border-radius: 24px; |
| font-size: 15px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: transform 0.2s, box-shadow 0.2s; |
| } |
| |
| .send-button:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(57, 198, 198, 0.4); |
| } |
| |
| .send-button:active:not(:disabled) { |
| transform: translateY(0); |
| } |
| |
| .send-button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| |
| .loading-dots { |
| display: inline-block; |
| } |
| |
| .loading-dots::after { |
| content: '...'; |
| animation: dots 1.5s steps(4, end) infinite; |
| } |
| |
| @keyframes dots { |
| 0%, 20% { |
| content: '.'; |
| } |
| 40% { |
| content: '..'; |
| } |
| 60%, 100% { |
| content: '...'; |
| } |
| } |
| |
| @media (max-width: 640px) { |
| .container { |
| height: 100vh; |
| max-height: none; |
| border-radius: 0; |
| } |
| |
| .message-content { |
| max-width: 85%; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>Ask Miku</h1> |
| <div class="status"> |
| <span class="status-indicator" id="statusIndicator"></span> |
| <span id="statusText">Ready to load</span> |
| </div> |
| <div id="loadButtonContainer" style="margin-top: 12px; text-align: center;"> |
| <button class="send-button" id="loadModelButton">Load model</button> |
| </div> |
| |
| |
| |
| |
| |
| </div> |
|
|
| <div class="chat-container" id="chatContainer"> |
| </div> |
|
|
| <div class="input-container"> |
| <input |
| type="text" |
| class="input-field" |
| id="userInput" |
| placeholder="Type your message..." |
| disabled |
| > |
| <button class="send-button" id="sendButton" disabled>Send</button> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/indexeddb-export-import@2.1.5/index.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script> |
| <script type="module" src="index.js"></script> |
| </body> |
| </html> |
