add imagen lora server

.gitignore

@@ -0,0 +1 @@
+.env

app.py

@@ -0,0 +1,43 @@
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+from typing import List
+import os
+from mistralai import Mistral
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+api_key = os.getenv("MISTRAL_API_KEY")
+
+# Initialize FastAPI app
+app = FastAPI()
+
+# Initialize Mistral client
+client = Mistral(api_key=api_key)
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    model: str
+    messages: List[Message]
+
+@app.post("/chat/complete")
+async def chat_complete(request: ChatRequest):
+    try:
+        response = client.chat.complete(
+            model=request.model,
+            messages=[{"role": msg.role, "content": msg.content} for msg in request.messages]
+        )
+        return {
+            "content": response.choices[0].message.content,
+            "finish_reason": response.choices[0].finish_reason
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

helpers/image-gen/flux-cctv.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import numpy as np
 import random
-# import spaces
+import spaces
 import torch
 from diffusers import DiffusionPipeline, FlowMatchEulerDiscreteScheduler, AutoencoderTiny, AutoencoderKL
 from transformers import CLIPTextModel, CLIPTokenizer, T5EncoderModel, T5TokenizerFast
@@ -16,7 +16,7 @@ good_vae = AutoencoderKL.from_pretrained("black-forest-labs/FLUX.1-dev", subfold
 pipe = DiffusionPipeline.from_pretrained("black-forest-labs/FLUX.1-dev", torch_dtype=dtype, vae=taef1).to(device)
 
 # Load the CCTV Horror LoRA
-pipe.load_lora_weights("Alfred126/lora-horror-cctv")
+pipe.load_lora_weights("Alfred126/lora-horror-cctv", adapter_name="horror")
 
 torch.cuda.empty_cache()
 
@@ -25,13 +25,15 @@ MAX_IMAGE_SIZE = 2048
 
 pipe.flux_pipe_call_that_returns_an_iterable_of_images = flux_pipe_call_that_returns_an_iterable_of_images.__get__(pipe)
 
-# @spaces.GPU(duration=75)
+@spaces.GPU(duration=75)
 def infer(prompt, seed=42, randomize_seed=False, width=1024, height=1024, guidance_scale=3.5, num_inference_steps=28, lora_scale=0.7, progress=gr.Progress(track_tqdm=True)):
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
     generator = torch.Generator().manual_seed(seed)
     
-    # Add cross attention scale for LoRA
+    # Set the LoRA scale through the pipeline parameters
+    pipe.set_adapters_scale(lora_scale)
+    
     for img in pipe.flux_pipe_call_that_returns_an_iterable_of_images(
             prompt=prompt,
             guidance_scale=guidance_scale,
@@ -41,7 +43,6 @@ def infer(prompt, seed=42, randomize_seed=False, width=1024, height=1024, guidan
             generator=generator,
             output_type="pil",
             good_vae=good_vae,
-            cross_attention_kwargs={"scale": lora_scale},
         ):
             yield img, seed
 
@@ -145,4 +146,4 @@ Create horror-style CCTV footage images using FLUX.1 and the CCTV Horror LoRA
         outputs=[result, seed]
     )
 
-demo.launch(share=True, ssr_mode=False)
+demo.launch()

static/assets/css/style.css

@@ -0,0 +1,424 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.blood {
+  position: absolute;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 350px;
+  opacity: 50%;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  position: absolute;
+  bottom: -120px;
+  right: -50px;
+  opacity: 40%;
+}
+
+.blood-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  margin: 20px 20px 0px 0px;
+  transform: rotate(30deg);
+}
+
+.splatter {
+  position: absolute;
+  opacity: 60%;
+  bottom: 240px;
+  left: 30%;
+  transform: translateX(-50%);
+  transform: rotate(20deg);
+  width: 400px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+  z-index: 1;
+  margin-top: 200px;
+}
+
+.logo {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: flicker 4s linear infinite;
+}
+
+.logo img {
+  width: 230px;
+  height: auto;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  position: relative;
+}
+
+.menu::after {
+  content: "";
+  position: absolute;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0) 70%
+  );
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu-item {
+  font-family: "HorrorBrush", cursive;
+  font-size: 48px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+}
+
+.new-game {
+  color: #9b0000;
+}
+
+.menu-item:hover {
+  color: #9b0000;
+}
+
+.how-to-play:hover {
+  color: #9b0000;
+}
+
+.level-maker:hover {
+  color: #9b0000;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    opacity: 0.9;
+  }
+  10% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.4;
+  }
+  16% {
+    opacity: 1;
+  }
+  17% {
+    opacity: 0.4;
+  }
+  18% {
+    opacity: 1;
+  }
+  35% {
+    opacity: 1;
+  }
+  36% {
+    opacity: 0.3;
+  }
+  37% {
+    opacity: 1;
+  }
+  38% {
+    opacity: 0.5;
+  }
+  39% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0.7;
+  }
+  52% {
+    opacity: 1;
+  }
+  53% {
+    opacity: 0.4;
+  }
+  54% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  86% {
+    opacity: 0.6;
+  }
+  87% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0.4;
+  }
+  89% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.3;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.2;
+  }
+  99% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+  95% {
+    opacity: 0.7;
+  }
+  96% {
+    opacity: 0.2;
+  }
+  97% {
+    opacity: 0.7;
+  }
+  98% {
+    opacity: 0.1;
+  }
+  99% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* How to Play Page Styles */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 20px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  letter-spacing: 4px;
+}
+
+.back-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back-button:hover {
+  color: #9b0000;
+}
+
+.character {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  animation: characterFlicker 6s infinite;
+}
+
+.character img {
+  width: 450px;
+  height: auto;
+}
+
+@keyframes characterFlicker {
+  0% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  42% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  43% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+  44% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  45% {
+    opacity: 0.6;
+    filter: brightness(1.3);
+  }
+  46% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  47% {
+    opacity: 0.2;
+    filter: brightness(1.5);
+  }
+  48% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  49% {
+    opacity: 0.4;
+    filter: brightness(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  80% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  81% {
+    opacity: 0.5;
+    filter: brightness(1.3);
+  }
+  82% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}

static/game/apt.json

@@ -3243,7 +3243,7 @@
     ],
     "rooms": [
       [
-        "Kichen",
+        "Kitchen",
         [
           {
             "x": 28,
@@ -3362,8 +3362,8 @@
       ]
     ],
     "characterPos": {
-      "x": 28,
-      "y": 15
+      "x": 4,
+      "y": 16
     },
     "gridCols": 32,
     "gridRows": 20

static/game/game-with-chat.html

@@ -1,537 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Get Me Out! - Apartment Escape Game with Chat</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
-    <style>
-        /* Layout */
-        body {
-            margin: 0;
-            font-family: Arial, sans-serif;
-            display: flex;
-            height: 100vh;
-        }
-        #gameContainer {
-            display: flex;
-            width: 100%;
-            height: 100%;
-        }
-        #mapSection {
-            flex: 1;
-            position: relative;
-            background: #f5f5f5;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        /* We'll place the P5 canvas in here */
-        .map-wrapper {
-            margin: 20px;
-            transform-origin: top left;
-        }
-
-        #chatSection {
-            width: 400px;
-            border-left: 1px solid #ddd;
-            display: flex;
-            flex-direction: column;
-            background: white;
-        }
-        #chatHistory {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: #f8f9fa;
-        }
-        #chatControls {
-            padding: 20px;
-            border-top: 1px solid #ddd;
-            background: white;
-        }
-        .chat-message {
-            padding: 10px;
-            margin: 5px 0;
-            border-radius: 16px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .user-message {
-            background: #007AFF;
-            color: white;
-            margin-left: auto;
-            border-radius: 16px 16px 4px 16px;
-        }
-        .assistant-message {
-            background: #E9E9EB;
-            color: black;
-            margin-right: auto;
-            border-radius: 16px 16px 16px 4px;
-        }
-        textarea {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            margin-bottom: 10px;
-            resize: none;
-            font-family: inherit;
-        }
-        button {
-            padding: 8px 16px;
-            background: #007AFF;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #0056b3;
-        }
-        .loading-dots {
-            display: inline-flex;
-            gap: 4px;
-            padding: 5px;
-            margin: 5px 0;
-        }
-        .dot {
-            width: 8px;
-            height: 8px;
-            background: #6c757d;
-            border-radius: 50%;
-            animation: wave 1.3s linear infinite;
-        }
-        .dot:nth-child(2) { animation-delay: -1.1s; }
-        .dot:nth-child(3) { animation-delay: -0.9s; }
-        @keyframes wave {
-            0%, 60%, 100% { transform: translateY(0); }
-            30% { transform: translateY(-4px); }
-        }
-
-        /* Modal for API key (if needed) */
-        #apiKeyModal {
-            display: none;
-            position: fixed;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            background: rgba(0,0,0,0.5);
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-content {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            width: 300px;
-        }
-        #apiKey {
-            width: 100%;
-            margin: 10px 0;
-            padding: 8px;
-        }
-    </style>
-</head>
-<body>
-    <div id="gameContainer">
-        <div id="mapSection">
-            <div id="mapWrapper" class="map-wrapper">
-                <!-- P5.js canvas goes here -->
-            </div>
-        </div>
-        <div id="chatSection">
-            <div id="chatHistory"></div>
-            <div id="chatControls">
-                <textarea id="prompt" placeholder="Type your message..." rows="3"></textarea>
-                <button onclick="sendMessage()">Send</button>
-            </div>
-        </div>
-    </div>
-    <div id="apiKeyModal">
-        <div class="modal-content">
-            <h3>Enter Mistral API Key</h3>
-            <input type="password" id="apiKey" placeholder="Enter your API key">
-            <button onclick="saveApiKey()">Save</button>
-        </div>
-    </div>
-
-    <script>
-        /* 
-         * This script loads ./apt.json to set up the map,
-         * draws it in p5.js, and provides a chat interface on the right.
-         */
-
-        // Constants and variables for the map
-        const CELL_SIZE = 30;
-        let GRID_COLS = 0;
-        let GRID_ROWS = 0;
-        let grid = [];
-        let rooms = new Map();
-        let characterPos = null;
-        let path = [];
-        let isMoving = false;
-        let moveInterval = null;
-
-        // Chat variables
-        let apiKey = localStorage.getItem('mistralApiKey');
-        const 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 send instructions through text.
-
-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
-`;
-
-        // Load apt.json upon page start
-        async function loadAptJson() {
-            try {
-                const response = await fetch('./apt.json');
-                if (!response.ok) {
-                    alert("Failed to load apt.json!");
-                    return;
-                }
-                const data = await response.json();
-                // Update local variables from apt.json
-                GRID_COLS = data.gridCols || 40;
-                GRID_ROWS = data.gridRows || 20;
-                grid = data.grid || [];
-                rooms = new Map(data.rooms);
-                characterPos = data.characterPos || { x: 0, y: 0 };
-
-                // Once loaded, initialize the P5 canvas with correct dims
-                let canvas = createCanvas(GRID_COLS * CELL_SIZE, GRID_ROWS * CELL_SIZE);
-                canvas.parent('mapWrapper');
-                adjustScale();
-
-            } catch (e) {
-                console.error("Error loading apt.json:", e);
-            }
-        }
-
-        function adjustScale() {
-            const availableWidth = window.innerWidth - 400 - 40; // space for chat + margins
-            const actualCanvasWidth = GRID_COLS * CELL_SIZE;
-            const scale = availableWidth / actualCanvasWidth;
-            const mapWrapper = document.querySelector('#mapSection .map-wrapper');
-            if (mapWrapper) {
-                // use CSS zoom or transform
-                mapWrapper.style.zoom = scale;
-            }
-        }
-
-        window.addEventListener('resize', adjustScale);
-
-        // p5.js setup
-        function setup() {
-            // We'll wait to createCanvas until apt.json is loaded
-            loadAptJson();
-        }
-
-        // p5.js draw loop
-        function draw() {
-            if (!grid || grid.length === 0) {
-                // No grid loaded yet or apt.json not ready
-                return;
-            }
-            background(255);
-            drawGrid();
-            drawRooms();
-            drawWallsAndDoors();
-            drawPath();
-            drawCharacter();
-        }
-
-        function drawGrid() {
-            stroke(200);
-            for (let x = 0; x <= GRID_COLS; x++) {
-                line(x * CELL_SIZE, 0, x * CELL_SIZE, GRID_ROWS*CELL_SIZE);
-            }
-            for (let y = 0; y <= GRID_ROWS; y++) {
-                line(0, y * CELL_SIZE, GRID_COLS*CELL_SIZE, y * CELL_SIZE);
-            }
-        }
-
-        function drawRooms() {
-            for (let [roomName, cells] of rooms) {
-                const hue = stringToHue(roomName);
-                fill(hue, 30, 95, 0.3);
-                noStroke();
-                for (let cell of cells) {
-                    rect(cell.x * CELL_SIZE, cell.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                }
-                if (cells.length > 0) {
-                    fill(0);
-                    textAlign(CENTER, CENTER);
-                    textSize(10);
-                    text(roomName, 
-                        cells[0].x * CELL_SIZE + CELL_SIZE/2, 
-                        cells[0].y * CELL_SIZE + CELL_SIZE/2
-                    );
-                }
-            }
-        }
-
-        function drawWallsAndDoors() {
-            for (let y = 0; y < GRID_ROWS; y++) {
-                for (let x = 0; x < GRID_COLS; x++) {
-                    const cell = grid[y][x];
-                    if (cell.type === 'wall') {
-                        fill(0);
-                        noStroke();
-                        rect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                    } else if (cell.type === 'door') {
-                        fill(255, 0, 0);
-                        noStroke();
-                        rect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                    }
-                }
-            }
-        }
-
-        function drawPath() {
-            if (path.length > 0 && isMoving) {
-                noFill();
-                stroke(0, 255, 0);
-                strokeWeight(2);
-                line(
-                    characterPos.x * CELL_SIZE + CELL_SIZE/2,
-                    characterPos.y * CELL_SIZE + CELL_SIZE/2,
-                    path[0].x * CELL_SIZE + CELL_SIZE/2,
-                    path[0].y * CELL_SIZE + CELL_SIZE/2
-                );
-                for (let i = 0; i < path.length - 1; i++) {
-                    line(
-                        path[i].x * CELL_SIZE + CELL_SIZE/2,
-                        path[i].y * CELL_SIZE + CELL_SIZE/2,
-                        path[i + 1].x * CELL_SIZE + CELL_SIZE/2,
-                        path[i + 1].y * CELL_SIZE + CELL_SIZE/2
-                    );
-                }
-                strokeWeight(1);
-            }
-        }
-
-        function drawCharacter() {
-            if (characterPos) {
-                textSize(CELL_SIZE * 0.8);
-                textAlign(CENTER, CENTER);
-                text('👧', 
-                    characterPos.x * CELL_SIZE + CELL_SIZE/2, 
-                    characterPos.y * CELL_SIZE + CELL_SIZE/2
-                );
-            }
-        }
-
-        function stringToHue(str) {
-            let hash = 0;
-            for (let i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            }
-            return hash % 360;
-        }
-
-        // Simple BFS for pathfinding
-        function findPath(start, end) {
-            const queue = [[start]];
-            const visited = new Set();
-            const key = pos => `${pos.x},${pos.y}`;
-            visited.add(key(start));
-
-            while (queue.length > 0) {
-                const currentPath = queue.shift();
-                const current = currentPath[currentPath.length - 1];
-
-                if (current.x === end.x && current.y === end.y) {
-                    return currentPath;
-                }
-                const neighbors = [
-                    { x: current.x, y: current.y - 1 },
-                    { x: current.x+1, y: current.y },
-                    { x: current.x, y: current.y+1 },
-                    { x: current.x-1, y: current.y }
-                ];
-                for (const next of neighbors) {
-                    if (next.x < 0 || next.x >= GRID_COLS || next.y < 0 || next.y >= GRID_ROWS) continue;
-                    if (visited.has(key(next))) continue;
-
-                    const cell = grid[next.y][next.x];
-                    if (cell.type === 'wall') continue;
-
-                    visited.add(key(next));
-                    queue.push([...currentPath, next]);
-                }
-            }
-            return [];
-        }
-
-        function moveToRoom(roomName) {
-            const targetRoom = Array.from(rooms.entries())
-                .find(([name]) => name.toLowerCase() === roomName.toLowerCase());
-            if (!targetRoom || !characterPos) return false;
-
-            const [_, cells] = targetRoom;
-            if (cells.length === 0) return false;
-            path = findPath(characterPos, cells[0]);
-            if (path.length > 0) {
-                isMoving = true;
-                moveCharacterAlongPath();
-                return true;
-            }
-            return false;
-        }
-
-        function moveCharacterAlongPath() {
-            if (moveInterval) clearInterval(moveInterval);
-            moveInterval = setInterval(() => {
-                if (path.length === 0) {
-                    isMoving = false;
-                    clearInterval(moveInterval);
-                    return;
-                }
-                const nextPos = path.shift();
-                characterPos = nextPos;
-            }, 200);
-        }
-
-        /* Chat / Mistral-related code */
-        function createLoadingIndicator() {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'chat-message assistant-message';
-            loadingDiv.innerHTML = `
-                <div class="loading-dots">
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                </div>
-            `;
-            return loadingDiv;
-        }
-
-        function addMessageToChat(role, content) {
-            const chatHistory = document.getElementById('chatHistory');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `chat-message ${role}-message`;
-            messageDiv.textContent = content;
-            chatHistory.appendChild(messageDiv);
-            chatHistory.scrollTop = chatHistory.scrollHeight;
-        }
-
-        async function sendMessage() {
-            const prompt = document.getElementById('prompt').value.trim();
-            if (!prompt) return;
-
-            if (!apiKey) {
-                alert('Please enter your Mistral API key first');
-                document.getElementById('apiKeyModal').style.display = 'flex';
-                return;
-            }
-
-            // Add user message to the chat
-            addMessageToChat('user', prompt);
-            document.getElementById('prompt').value = '';
-
-            // Add loading indicator
-            const chatHistory = document.getElementById('chatHistory');
-            const loadingIndicator = createLoadingIndicator();
-            chatHistory.appendChild(loadingIndicator);
-
-            try {
-                // Make call to Mistral or any AI endpoint
-                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: systemPrompt },
-                            { role: 'user', content: prompt }
-                        ]
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const data = await response.json();
-                const assistantResponse = data.choices[0].message.content || "";
-
-                try {
-                    const jsonStart = assistantResponse.indexOf('{');
-                    const jsonEnd = assistantResponse.lastIndexOf('}') + 1;
-                    const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
-                    const jsonResponse = JSON.parse(jsonContent);
-
-                    if (jsonResponse.textMessage) {
-                        addMessageToChat('assistant', jsonResponse.textMessage);
-                    }
-                    if (jsonResponse.action === 'go' && jsonResponse.to) {
-                        moveToRoom(jsonResponse.to);
-                    }
-                } catch (e) {
-                    console.error('Error parsing JSON from response:', e);
-                    addMessageToChat('assistant', 'Sorry, I had trouble understanding that response.');
-                }
-            } catch (error) {
-                addMessageToChat('assistant', `Error: ${error.message}`);
-            } finally {
-                loadingIndicator.remove();
-            }
-        }
-
-        function saveApiKey() {
-            const key = document.getElementById('apiKey').value.trim();
-            if (key) {
-                apiKey = key;
-                localStorage.setItem('mistralApiKey', key);
-                document.getElementById('apiKeyModal').style.display = 'none';
-            }
-        }
-
-        // Allow sending message with Enter
-        document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('prompt').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-
-            if (!apiKey) {
-                document.getElementById('apiKeyModal').style.display = 'flex';
-            }
-        });
-    </script>
-</body>
-</html> 

static/game/gameState.js

@@ -0,0 +1,94 @@
+
+        // Game state management
+        class GameState {
+          constructor() {
+              // Initialize with rooms from apt.json
+              this.rooms = [
+                "My Bedroom",
+                "Kichen",
+                "Storage",
+                "Bathroom",
+                "Main Hallway",
+                "Living Room",
+                "Guest Bedroom",
+                "Dining Room",
+                "Office",
+                "North Hallway"
+              ];
+      
+              this.hideTargets = [
+                {"room": "My Bedroom", "hiding_place": "bed"},
+                {"room": "North Hallway", "hiding_place": "coat closet"},
+                {"room": "Dining Room", "hiding_place": "table"},
+                {"room": "Guest Bedroom", "hiding_place": "bed"}
+              ]
+
+              this.searchTargets = ["dresser", "desk", "bookcase", "cabinet", "dead body", "fridge", "stove", "coffee table"];
+
+              this.items = ["lock pick", "book note", "flashlight", "knife", "oil", "remote"];
+
+              this.useTargets = ["bedroom door", "bookcase", "storage door", "dead body","coffee table","TV"];
+      
+              // Track current game state
+              this.currentRoom = this.rooms[0];
+              this.inventory = [];
+              this.isHiding = false;
+          }
+          setCurrentRoom(room) {
+            this.currentRoom = room;
+          }
+
+          handleAction(action, target) {
+              switch (action) {
+                  case 'go':
+                      this.currentRoom = target;
+                      break;
+                  case 'hide':
+                      this.isHiding = true;
+                      break;
+                  case 'search':
+                      // Could add found items to inventory
+                      break;
+                  case 'use':
+                      // Handle item usage
+                      break;
+              }
+          }
+      
+          getPrompt() {
+              return `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: ${this.currentRoom}
+- Hiding: ${this.isHiding}
+- Inventory: ${this.inventory.join(", ") || "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:
+${this.rooms.join('\n')}
+
+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`;
+          }
+
+}

static/game/index.html

@@ -3,6 +3,7 @@
 <head>
     <title>Get Me Out! - Apartment Escape Game with Chat</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script src="/static/game/gameState.js"></script>
     <style>
         /* Layout */
         body {
@@ -47,6 +48,8 @@
             padding: 20px;
             border-top: 1px solid #ddd;
             background: white;
+            display: flex;
+            gap: 10px;
         }
         .chat-message {
             padding: 10px;
@@ -67,13 +70,11 @@
             margin-right: auto;
             border-radius: 16px 16px 16px 4px;
         }
-        textarea {
-            width: 100%;
+        input {
+            flex: 1;
             padding: 10px;
             border: 1px solid #ddd;
             border-radius: 4px;
-            margin-bottom: 10px;
-            resize: none;
             font-family: inherit;
         }
         button {
@@ -140,8 +141,8 @@
         <div id="chatSection">
             <div id="chatHistory"></div>
             <div id="chatControls">
-                <textarea id="prompt" placeholder="Type your message..." rows="3"></textarea>
-                <button onclick="sendMessage()">Send</button>
+                <input type="text" id="prompt" placeholder="Type your message...">
+                <button onclick="Message()">▶</button>
             </div>
         </div>
     </div>
@@ -170,45 +171,12 @@
         let isMoving = false;
         let moveInterval = null;
 
+        // Initialize game state
+        const gameState = new GameState();
+
         // Chat variables
         let apiKey = localStorage.getItem('mistralApiKey');
-        const 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 send instructions through text.
-
-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
-`;
+        let chatMessages = []; // Array to store chat history
 
         // Load apt.json upon page start
         async function loadAptJson() {
@@ -445,6 +413,14 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                 if (path.length === 0) {
                     isMoving = false;
                     clearInterval(moveInterval);
+                    // Update game state with new room when movement is complete
+                    const currentRoomEntry = Array.from(rooms.entries())
+                        .find(([_, cells]) => cells.some(cell => 
+                            cell.x === characterPos.x && cell.y === characterPos.y
+                        ));
+                    if (currentRoomEntry) {
+                        gameState.setCurrentRoom(currentRoomEntry[0]);
+                    }
                     return;
                 }
                 const nextPos = path.shift();
@@ -473,9 +449,12 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
             messageDiv.textContent = content;
             chatHistory.appendChild(messageDiv);
             chatHistory.scrollTop = chatHistory.scrollHeight;
+
+            // Store message in chat history
+            chatMessages.push({ role, content });
         }
 
-        async function sendMessage() {
+        async function Message() {
             const prompt = document.getElementById('prompt').value.trim();
             if (!prompt) return;
 
@@ -485,17 +464,24 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                 return;
             }
 
-            // Add user message to the chat
             addMessageToChat('user', prompt);
             document.getElementById('prompt').value = '';
 
-            // Add loading indicator
             const chatHistory = document.getElementById('chatHistory');
             const loadingIndicator = createLoadingIndicator();
             chatHistory.appendChild(loadingIndicator);
 
             try {
-                // Make call to Mistral or any AI endpoint
+                // Get last 5 messages from chat history
+                const recentMessages = chatMessages.slice(-5);
+                
+                // Prepare messages array for Mistral
+                const messages = [
+                    { role: 'system', content: gameState.getPrompt() },
+                    ...recentMessages,
+                    { role: 'user', content: prompt }
+                ];
+
                 const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
                     method: 'POST',
                     headers: {
@@ -504,10 +490,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                     },
                     body: JSON.stringify({
                         model: 'mistral-large-latest',
-                        messages: [
-                            { role: 'system', content: systemPrompt },
-                            { role: 'user', content: prompt }
-                        ]
+                        messages: messages
                     })
                 });
 
@@ -516,6 +499,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                 }
 
                 const data = await response.json();
+                console.log('Mistral response:', data.choices[0].message.content);
                 const assistantResponse = data.choices[0].message.content || "";
 
                 try {
@@ -523,6 +507,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                     const jsonEnd = assistantResponse.lastIndexOf('}') + 1;
                     const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
                     const jsonResponse = JSON.parse(jsonContent);
+                    console.log('Parsed JSON response:', jsonResponse);
 
                     if (jsonResponse.textMessage) {
                         addMessageToChat('assistant', jsonResponse.textMessage);
@@ -550,12 +535,12 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
             }
         }
 
-        // Allow sending message with Enter
+        // Allow ing message with Enter
         document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('prompt').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
+                if (e.key === 'Enter') {
                     e.preventDefault();
-                    sendMessage();
+                    Message();
                 }
             });
 

static/game/test prompt.txt

@@ -0,0 +1,39 @@
+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  instructions through text.
+
+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
+
+
+      

static/how-to-play.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="public/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="public/help.png" alt="" class="blood blood-top-right" />
+      <img src="public/splatter.png" alt="" class="blood splatter" />
+      <img src="public/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <!-- Contenu à ajouter -->
+      </div>
+
+      <a href="index.html" class="back-button">Back to Menu</a>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

static/index.html

@@ -1,150 +1,34 @@
 <!DOCTYPE html>
-<html>
-<head>
-    <title>The Last Message - Horror Escape Game</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-            color: #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-
-        .container {
-            text-align: center;
-            padding: 2rem;
-            max-width: 800px;
-            position: relative;
-            z-index: 1;
-        }
-
-        h1 {
-            font-size: 4rem;
-            margin-bottom: 1rem;
-            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
-            animation: flicker 4s infinite;
-            letter-spacing: 2px;
-        }
-
-        .subtitle {
-            font-size: 1.2rem;
-            color: #bb0000;
-            margin-bottom: 3rem;
-            text-shadow: 0 0 5px #ff0000;
-        }
-
-        .menu {
-            display: grid;
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-
-        .menu-item {
-            background: rgba(20, 20, 20, 0.8);
-            padding: 1.5rem;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            color: white;
-            border: 1px solid #440000;
-            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
-        }
-
-        .menu-item:hover {
-            transform: scale(1.05);
-            background: rgba(40, 0, 0, 0.8);
-            border-color: #ff0000;
-            box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
-        }
-
-        .menu-item h2 {
-            margin: 0 0 0.5rem 0;
-            font-size: 1.8rem;
-            color: #ff0000;
-        }
-
-        .menu-item p {
-            margin: 0;
-            color: #cccccc;
-            font-size: 1rem;
-        }
-
-        @keyframes flicker {
-            0%, 100% { opacity: 1; }
-            92% { opacity: 1; }
-            93% { opacity: 0.8; }
-            94% { opacity: 1; }
-            95% { opacity: 0.9; }
-            96% { opacity: 1; }
-        }
-
-        /* Blood drips */
-        .blood-drip {
-            position: fixed;
-            top: 0;
-            width: 3px;
-            height: 60px;
-            background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.8));
-            animation: drip 4s infinite;
-            opacity: 0.7;
-        }
-
-        @keyframes drip {
-            0% {
-                transform: translateY(-60px);
-                opacity: 0;
-            }
-            50% {
-                opacity: 0.7;
-            }
-            100% {
-                transform: translateY(100vh);
-                opacity: 0;
-            }
-        }
-
-      
-    </style>
-</head>
-<body>
-    <!-- Blood drip effects -->
-    <div class="blood-drip" style="left: 15%"></div>
-    <div class="blood-drip" style="left: 35%; animation-delay: 1.5s"></div>
-    <div class="blood-drip" style="left: 55%; animation-delay: 2.5s"></div>
-    <div class="blood-drip" style="left: 75%; animation-delay: 1s"></div>
-    <div class="blood-drip" style="left: 95%; animation-delay: 2s"></div>
-
-    <div class="container">
-        <h1>THE LAST MESSAGE</h1>
-        <div class="subtitle">Will your final words save them?</div>
-
-        <div class="menu">
-            <a href="game/" class="menu-item">
-                <h2>📱 PLAY THE STORY</h2>
-                <p>Experience the original nightmare</p>
-            </a>
-
-            <a href="maker/" class="menu-item">
-                <h2>🏗️ CREATE & PLAY</h2>
-                <p>Design and play your own horror scenario</p>
-            </a>
-        </div>
-
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
     </div>
 
-    <script>
-        // Add random delay and duration to blood drips
-        document.querySelectorAll('.blood-drip').forEach(drip => {
-            drip.style.animationDuration = (3 + Math.random() * 2) + 's';
-        });
-    </script>
-</body>
-</html>
+    <main>
+      <div class="logo">
+        <img src="assets/img/logo.png" alt="Through Their Eyes" />
+      </div>
+
+      <nav class="menu">
+        <a href="game/" class="menu-item new-game">NEW GAME</a>
+        <a href="how-to-play.html" class="menu-item how-to-play">HOW TO PLAY</a>
+      </nav>
+      <div class="character">
+        <img src="assets/img/perso.png" alt="Character" />
+      </div>
+    </main>
+  </body>
+</html>

static/maker/index.html

@@ -57,6 +57,7 @@
         |
         <button onclick="saveMap()">Save Map</button>
         <button onclick="loadMap()">Load Map</button>
+        <button onclick="loadFromJson()">Load from JSON</button>
         |
         <input type="number" id="gridCols" value="40" min="1" style="width: 60px"> × 
         <input type="number" id="gridRows" value="20" min="1" style="width: 60px">
@@ -69,7 +70,7 @@
     <!-- Move the JSON text areas here so they appear after the editor and canvas -->
     <div style="margin-top: 20px; width: 100%; max-width: 1200px; text-align: center;">
         <textarea id="roomsJson" readonly style="width: 90%; height: 100px; margin: 10px; padding: 10px;" placeholder="Rooms will appear here in JSON format"></textarea>
-        <textarea id="gameJson" readonly style="width: 90%; height: 200px; margin: 10px; padding: 10px;" placeholder="Complete game definition will appear here in JSON format"></textarea>
+        <textarea id="gameJson"  style="width: 90%; height: 200px; margin: 10px; padding: 10px;" placeholder="Complete game definition will appear here in JSON format"></textarea>
     </div>
 
     <script>
@@ -481,6 +482,43 @@
             updateGameJson(); // Update game JSON after loading
         }
 
+        function loadFromJson() {
+            const gameJson = document.getElementById('gameJson').value;
+            if (!gameJson) {
+                alert('Please paste a valid game JSON in the textarea below');
+                return;
+            }
+
+            try {
+                const data = JSON.parse(gameJson);
+                
+                // Validate required fields
+                if (!data.grid || !Array.isArray(data.grid)) {
+                    throw new Error('Invalid grid data');
+                }
+
+                // Update grid dimensions and input fields
+                GRID_COLS = data.gridCols || data.grid[0].length;
+                GRID_ROWS = data.gridRows || data.grid.length;
+                document.getElementById('gridCols').value = GRID_COLS;
+                document.getElementById('gridRows').value = GRID_ROWS;
+                
+                // Resize canvas and initialize grid
+                resizeCanvas(GRID_COLS * CELL_SIZE, GRID_ROWS * CELL_SIZE);
+                initGrid();
+                
+                // Load saved data
+                grid = data.grid;
+                rooms = new Map(data.rooms || []);
+                characterPos = data.characterPos;
+                
+                updateRoomDropdown();
+                updateGameJson();
+            } catch (error) {
+                alert('Error loading JSON: ' + error.message);
+            }
+        }
+
         function removeSelectedRoom() {
             const roomName = document.getElementById('roomSelect').value;
             if (!roomName) return;

static/mistral/index.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<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>