Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mistral Chat Test Bed</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 20px auto; | |
| padding: 0 20px; | |
| } | |
| /* System Prompt Section */ | |
| #systemPromptSection { | |
| margin-bottom: 20px; | |
| padding: 10px; | |
| background: #f8f9fa; | |
| border-radius: 4px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 150px; | |
| margin: 10px 0; | |
| padding: 8px; | |
| font-family: monospace; | |
| } | |
| /* Chat Section */ | |
| #chatHistory { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| margin: 20px 0; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| .chat-message { | |
| padding: 10px; | |
| margin: 5px 0; | |
| border-radius: 4px; | |
| } | |
| .user-message { | |
| background: #e3f2fd; | |
| } | |
| .assistant-message { | |
| background: #f5f5f5; | |
| white-space: pre-wrap; | |
| } | |
| /* Raw JSON Section */ | |
| .raw-json { | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| color: #666; | |
| margin-top: 5px; | |
| padding: 5px; | |
| background: #f8f9fa; | |
| border-left: 3px solid #007bff; | |
| } | |
| /* Controls */ | |
| #controls { | |
| display: flex; | |
| gap: 10px; | |
| margin: 20px 0; | |
| } | |
| input[type="text"] { | |
| flex: 1; | |
| padding: 8px; | |
| } | |
| button { | |
| padding: 8px 16px; | |
| background: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #0056b3; | |
| } | |
| /* Display Options */ | |
| .display-options { | |
| margin: 10px 0; | |
| padding: 10px; | |
| background: #f8f9fa; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Mistral Chat Test Bed</h1> | |
| <div id="systemPromptSection"> | |
| <h3>System Prompt</h3> | |
| <textarea id="systemPrompt">You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can give instructions through text. | |
| Current state: | |
| - Room: Main Bathroom | |
| - Hiding: false | |
| - Inventory: empty | |
| RESPONSE FORMAT: | |
| You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message. | |
| 1. For movement instructions ("go" action): | |
| { | |
| "action": "go", | |
| "to": "[room name]", | |
| "textMessage": "[girlfriend's response]" | |
| } | |
| 2. For any other input or unclear instructions: | |
| { | |
| "textMessage": "[girlfriend's response]" | |
| } | |
| VALID ROOMS: | |
| Only these rooms are recognized for movement: | |
| Main Bathroom | |
| Guest Toilet | |
| Dining Room | |
| Kitchen | |
| TV Room | |
| Living Room | |
| Hallway | |
| Office | |
| Bedroom | |
| CHARACTER BEHAVIOR: | |
| The girlfriend is aware of the danger and extremely distressed. Her text responses should be: | |
| - Brief and urgent | |
| - Reflect genuine fear and panic | |
| - Written like real text messages (short, quick responses) | |
| - No time for pleasantries or long explanations | |
| - May include typos or rushed writing due to stress</textarea> | |
| </div> | |
| <div class="display-options"> | |
| <label> | |
| <input type="checkbox" id="showRawJson" checked> | |
| Show Raw JSON Response | |
| </label> | |
| </div> | |
| <div id="chatHistory"></div> | |
| <div id="controls"> | |
| <input type="text" id="userInput" placeholder="Type your message..."> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| <div id="apiKeySection"> | |
| <h3>API Key</h3> | |
| <input type="password" id="apiKey" placeholder="Enter Mistral API Key"> | |
| <button onclick="saveApiKey()">Save API Key</button> | |
| </div> | |
| <script> | |
| let apiKey = localStorage.getItem('mistralApiKey'); | |
| if (apiKey) { | |
| document.getElementById('apiKey').value = apiKey; | |
| } | |
| function saveApiKey() { | |
| const key = document.getElementById('apiKey').value.trim(); | |
| if (key) { | |
| apiKey = key; | |
| localStorage.setItem('mistralApiKey', key); | |
| alert('API key saved!'); | |
| } | |
| } | |
| function addMessage(role, content, rawJson = null) { | |
| const chatHistory = document.getElementById('chatHistory'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `chat-message ${role}-message`; | |
| messageDiv.textContent = content; | |
| if (rawJson && document.getElementById('showRawJson').checked) { | |
| const jsonDiv = document.createElement('div'); | |
| jsonDiv.className = 'raw-json'; | |
| jsonDiv.textContent = JSON.stringify(rawJson, null, 2); | |
| messageDiv.appendChild(jsonDiv); | |
| } | |
| chatHistory.appendChild(messageDiv); | |
| chatHistory.scrollTop = chatHistory.scrollHeight; | |
| } | |
| async function sendMessage() { | |
| const userInput = document.getElementById('userInput'); | |
| const message = userInput.value.trim(); | |
| if (!message) return; | |
| if (!apiKey) { | |
| alert('Please enter your Mistral API key first'); | |
| return; | |
| } | |
| // Add user message to chat | |
| addMessage('user', message); | |
| userInput.value = ''; | |
| try { | |
| const response = await fetch('https://api.mistral.ai/v1/chat/completions', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${apiKey}` | |
| }, | |
| body: JSON.stringify({ | |
| model: 'mistral-large-latest', | |
| messages: [ | |
| { | |
| role: 'system', | |
| content: document.getElementById('systemPrompt').value | |
| }, | |
| { | |
| role: 'user', | |
| content: message | |
| } | |
| ] | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| const assistantResponse = data.choices[0].message.content; | |
| try { | |
| // Extract JSON from response | |
| const jsonStart = assistantResponse.indexOf('{'); | |
| const jsonEnd = assistantResponse.lastIndexOf('}') + 1; | |
| const jsonContent = assistantResponse.substring(jsonStart, jsonEnd); | |
| const jsonResponse = JSON.parse(jsonContent); | |
| // Add assistant message with both text and raw JSON | |
| addMessage('assistant', jsonResponse.textMessage, jsonResponse); | |
| } catch (e) { | |
| console.error('Error parsing JSON from response:', e); | |
| addMessage('assistant', assistantResponse); | |
| } | |
| } catch (error) { | |
| addMessage('assistant', `Error: ${error.message}`); | |
| } | |
| } | |
| // Allow sending message with Enter key | |
| document.getElementById('userInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |