Spaces:

protae5544
/

95win

Running

App Files Files Community

protae5544 commited on 16 days ago

Commit

006afa7

verified ·

1 Parent(s): bd1b6f2

Update index.html

Browse files

Files changed (1) hide show

index.html +90 -755

index.html CHANGED Viewed

@@ -3,8 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>AI Chat - Win95 Enhanced Multi-Modal</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css">
   <style>
     html, body { height: 100%; margin: 0; }
@@ -36,7 +37,7 @@
       z-index: 1;
     }
     .win95window.fullscreen {
-      position: fixed !important;
       left: 0; top: 0; right: 0; bottom: 0;
       min-width: 100vw; min-height: 100vh; max-width: none; max-height: none;
       width: 100vw; height: 100vh;
@@ -290,46 +291,46 @@
       background-position: 6px 7px;
       background-size: 16px 16px;
     }
-    #contextSaveArea95 {
-      padding: 10px 10px 12px;
-      background: #f8f8e0;
-      border-top: 2px solid #fff;
-      border-bottom: 2px solid #808080;
-      display: none;
-      font-size: 0.98em;
-    }
     #contextSaveArea95 h4 { margin: 0 0 8px 0; color: #444; font-size: 1.08em; }
-    #contextSaveArea95 pre {
-      background: #fff;
-      border: 2px inset #808080;
-      padding: 8px 5px;
-      font-size: 0.95em;
-      max-height: 120px;
-      overflow: auto;
-      margin: 7px 0;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
     #contextSaveArea95 label { font-weight: bold; }
-    #contextSaveArea95 input[type="text"] {
-      width: 98%;
-      min-width: 0;
-      border: 2px inset #808080;
-      background: #fff;
-      font-size: 1em;
-      margin-bottom: 3px;
-      padding: 4px 8px;
-    }
-    #contextSaveArea95 button {
-      margin-top: 6px;
-      font-size: 1em;
-      background: #e0e0e0;
-      border: 2px outset #fff;
-      color: #000;
-      padding: 2.5px 14px;
-      cursor: pointer;
-      border-radius: 0;
-    }
     #contextSaveArea95 button:active { background: #c0c0c0; border: 2px inset #808080; }
     #contextSaveArea95 button:disabled { background: #e0e0e0; color: #bbb; border: 2px outset #b0b0b0; }
     .model-pair-selection {
@@ -358,18 +359,18 @@
       max-width: 180px;
     }
     @media (max-width: 650px) {
-      .win95window {
-        min-width: 0;
-        max-width: 98vw;
-        box-shadow: 1px 2px 0px #0006, 0 0 0 2px #6664;
-      }
       .win95content { padding: 0; }
-      .settings95 {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-        padding: 8px 4px;
-      }
       .system-preset-area {
         flex-direction: column;
         align-items: flex-start;
@@ -382,18 +383,18 @@
         gap: 4px;
         padding: 6px 4px;
       }
-      .input-area95 {
-        flex-direction: column;
-        gap: 8px;
-        padding: 8px 4px;
       }
-      .chat-container95 {
-        padding: 10px 2px;
-        font-size: 0.98em;
-      }
-      .dropzone95 {
-        font-size: 1em;
-        padding: 20px 2px 14px;
       }
     }
   </style>
@@ -405,7 +406,7 @@
       <span style="display:inline-block;width:18px;height:18px;background:#fff;border:1px solid #808080;margin-right:7px;box-shadow:inset 2px 2px #c0c0c0;">
         <span style="display:inline-block;width:9px;height:9px;background:#008080;margin:4px 0 0 4px;vertical-align:middle;"></span>
       </span>
-      AI Chat - Win95 Multi-Modal Enhanced
     </div>
     <div class="win95controls">
       <button id="maximizeBtn" title="เต็มจอ">&#9633;</button>
@@ -415,40 +416,20 @@
   </div>
   <div class="win95content">
     <form class="settings95" id="settingsForm95" autocomplete="off" onsubmit="return false;">
-      <label for="providerSelect95">API:</label>
-      <select id="providerSelect95">
-        <option value="anthropic">Anthropic (Claude)</option>
-        <option value="xai">xAI (Grok-3)</option>
-        <option value="groq">Groq</option>
-        <option value="openai">OpenAI</option>
-        <option value="ollama">Ollama (Local)</option>
-        <option value="huggingface">HuggingFace</option>
-        <option value="google">Google (Gemini)</option>
-      </select>
-      <label for="modelSelect95">โมเดล:</label>
-      <select id="modelSelect95"></select>
-      <label for="apiKey95">API Key:</label>
-      <input type="text" id="apiKey95" placeholder="กรอก API Key ของคุณ">
       <button id="confirmApiKeyBtn95" type="button">บันทึก</button>
       <span class="api-status" id="apiKeyStatus95"></span>
     </form>
-    <div class="model-pair-selection" id="multiModalSelection" style="display:none;">
-      <label for="visionModelSelect95">Vision Model:</label>
-      <select id="visionModelSelect95">
         <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder 32B</option>
-        <option value="Qwen/Qwen2-VL-72B-Instruct">Qwen2-VL 72B</option>
-        <option value="microsoft/Florence-2-large">Florence-2 Large</option>
-        <option value="llava-hf/llava-1.5-7b-hf">LLaVA 1.5 7B (HF)</option>
-      </select>
-      <label for="ocrModelSelect95">OCR Model:</label>
-      <select id="ocrModelSelect95">
-        <option value="scb10x/typhoon-v1.5x-72b-instruct">Typhoon OCR 7B</option>
-        <option value="microsoft/trocr-base-printed">TrOCR Base</option>
-        <option value="PaddlePaddle/PaddleOCR">PaddleOCR</option>
       </select>
     </div>
     <div class="system-preset-area">
       <label for="systemPresetSelect95">ระบบ:</label>
       <select id="systemPresetSelect95">
@@ -460,7 +441,7 @@
       </select>
       <input type="text" id="customSystemPrompt95" placeholder="ใส่ System Prompt ของคุณ" style="display:none; flex: 1; min-width: 200px;">
     </div>
     <div id="contextSaveArea95">
       <h4>Context ปัจจุบัน</h4>
       <div id="warningMessage95" style="color:orange;font-weight:bold;"></div>
@@ -471,7 +452,7 @@
       <button id="confirmSaveBtn95">ยืนยัน context และเริ่มแชทใหม่</button>
     </div>
     <div class="chat-container95" id="messagesDiv95">
-      <div class="message95 ai">สวัสดี! AI Chat Multi-Modal Enhanced พร้อมใช้ 🎉<br>รองรับการวิเคราะห์รูปภาพและ OCR ด้วย Qwen2.5-Coder + Typhoon OCR!</div>
     </div>
     <form id="chatForm95" class="input-area95" autocomplete="off">
       <button type="button" class="file-attach-btn" id="fileAttachBtn" title="แนบไฟล์">
@@ -491,6 +472,7 @@
 const win95window = document.getElementById('win95window');
 const maximizeBtn = document.getElementById('maximizeBtn');
 let isFullscreen = false;
 maximizeBtn.onclick = function() {
   isFullscreen = !isFullscreen;
   win95window.classList.toggle('fullscreen', isFullscreen);
@@ -498,122 +480,7 @@ maximizeBtn.onclick = function() {
   maximizeBtn.title = isFullscreen ? "คืนหน้าต่าง" : "เต็มจอ";
 };
-// --- Provider/API Setup ---
-const PROVIDERS = {
-  anthropic: {
-    name: "Anthropic (Claude)",
-    endpoint: "https://api.anthropic.com/v1/messages",
-    apiKeyLabel: "Anthropic API Key",
-    models: [
-      { value: "claude-3-5-sonnet-20241022", label: "Claude-3.5 Sonnet" },
-      { value: "claude-3-haiku-20240307", label: "Claude-3 Haiku" },
-      { value: "claude-3-opus-20240229", label: "Claude-3 Opus" },
-      { value: "claude-3-sonnet-20240229", label: "Claude-3 Sonnet" }
-    ],
-    isStream: false,
-    streamEndpoint: "https://api.anthropic.com/v1/messages",
-    supportsMultiModal: true
-  },
-  xai: {
-    name: "xAI (Grok)",
-    endpoint: "https://api.x.ai/v1/chat/completions",
-    apiKeyLabel: "xAI API Key",
-    models: [
-      { value: "grok-3-beta", label: "Grok-3 Beta" },
-      { value: "grok-3-fast-beta", label: "Grok-3 Fast Beta" },
-      { value: "grok-3-mini-beta", label: "Grok-3 Mini Beta" },
-      { value: "grok-3-mini-fast-beta", label: "Grok-3 Mini Fast Beta" },
-      { value: "grok-2-1212", label: "Grok-2" },
-      { value: "grok-2-mini", label: "Grok-2 Mini" }
-    ],
-    isStream: true,
-    supportsMultiModal: true
-  },
-  groq: {
-    name: "Groq",
-    endpoint: "https://api.groq.com/openai/v1/chat/completions",
-    apiKeyLabel: "Groq API Key",
-    models: [
-      { value: "llama-3.3-70b-versatile", label: "Llama-3.3 70B" },
-      { value: "llama3-70b-8192", label: "Llama-3 70B 8K" },
-      { value: "llama3-8b-8192", label: "Llama-3 8B 8K" },
-      { value: "mixtral-8x7b-32768", label: "Mixtral 8x7B 32K" },
-      { value: "gemma2-9b-it", label: "Gemma-2 9B IT" },
-      { value: "gemma-7b-it", label: "Gemma 7B IT" }
-    ],
-    isStream: true,
-    supportsMultiModal: false
-  },
-  openai: {
-    name: "OpenAI",
-    endpoint: "https://api.openai.com/v1/chat/completions",
-    apiKeyLabel: "OpenAI API Key",
-    models: [
-      { value: "gpt-4o", label: "GPT-4o" },
-      { value: "gpt-4o-mini", label: "GPT-4o Mini" },
-      { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
-      { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
-      { value: "o1-preview", label: "o1-preview" },
-      { value: "o1-mini", label: "o1-mini" }
-    ],
-    isStream: true,
-    supportsMultiModal: true
-  },
-  ollama: {
-    name: "Ollama (Local)",
-    endpoint: "http://localhost:11434/api/chat",
-    apiKeyLabel: "ไม่ต้องใส่ API Key",
-    models: [
-      { value: "llama3.2-vision", label: "Llama 3.2 Vision" },
-      { value: "llama3.2", label: "Llama 3.2" },
-      { value: "llama3.1", label: "Llama 3.1" },
-      { value: "codellama", label: "Code Llama" },
-      { value: "mistral", label: "Mistral" },
-      { value: "gemma2", label: "Gemma 2" }
-    ],
-    isStream: true,
-    supportsMultiModal: true
-  },
-  huggingface: {
-    name: "HuggingFace",
-    endpoint: "https://api-inference.huggingface.co/models/", // Add trailing slash
-    apiKeyLabel: "HuggingFace API Key",
-    models: [
-      { value: "Qwen/Qwen2.5-Coder-32B-Instruct", label: "Qwen2.5-Coder 32B (Text/Code)" },
-      { value: "Qwen/Qwen2-VL-72B-Instruct", label: "Qwen2-VL 72B (Vision)" },
-      { value: "scb10x/typhoon-v1.5x-72b-instruct", label: "Typhoon 72B (Text/Code)" },
-      { value: "microsoft/Florence-2-large", label: "Florence-2 Large (Vision)" },
-      { value: "llava-hf/llava-1.5-7b-hf", label: "LLaVA 1.5 7B (Vision)" },
-      { value: "microsoft/trocr-base-printed", label: "TrOCR Base (OCR)" },
-      { value: "google/t5-base-qa", label: "T5 Base QA (Text)" } // Example, more models can be added
-    ],
-    isStream: false, // HuggingFace inference API usually doesn't stream by default
-    supportsMultiModal: true,
-    specificModelEndpoints: { // For multi-modal HF models, we might need specific endpoints
-      "Qwen/Qwen2-VL-72B-Instruct": "https://api-inference.huggingface.co/models/Qwen/Qwen2-VL-72B-Instruct",
-      "microsoft/Florence-2-large": "https://api-inference.huggingface.co/models/microsoft/Florence-2-large",
-      "llava-hf/llava-1.5-7b-hf": "https://api-inference.huggingface.co/models/llava-hf/llava-1.5-7b-hf",
-      "microsoft/trocr-base-printed": "https://api-inference.huggingface.co/models/microsoft/trocr-base-printed",
-      "PaddlePaddle/PaddleOCR": "https://api-inference.huggingface.co/models/PaddlePaddle/PaddleOCR", // Placeholder, usually requires dedicated setup or API
-    }
-  },
-  google: {
-    name: "Google (Gemini)",
-    endpoint: "https://generativelanguage.googleapis.com/v1beta/models/",
-    apiKeyLabel: "Google API Key",
-    models: [
-      { value: "gemini-pro", label: "Gemini Pro" },
-      { value: "gemini-pro-vision", label: "Gemini Pro Vision" },
-      { value: "gemini-1.5-pro-latest", label: "Gemini 1.5 Pro" },
-      { value: "gemini-1.5-flash-latest", label: "Gemini 1.5 Flash" }
-    ],
-    isStream: true,
-    supportsMultiModal: true
-  }
-};
-const providerSelect = document.getElementById('providerSelect95');
-const modelSelect = document.getElementById('modelSelect95');
 const apiKeyInput = document.getElementById('apiKey95');
 const confirmApiKeyBtn = document.getElementById('confirmApiKeyBtn95');
 const apiKeyStatus = document.getElementById('apiKeyStatus95');
@@ -630,9 +497,7 @@ const confirmSaveBtn = document.getElementById('confirmSaveBtn95');
 const fileInput = document.getElementById('fileInput');
 const fileNameSpan = document.getElementById('fileName');
 const dropzone = document.getElementById('dropzone95');
-const multiModalSelection = document.getElementById('multiModalSelection');
-const visionModelSelect = document.getElementById('visionModelSelect95');
-const ocrModelSelect = document.getElementById('ocrModelSelect95');
 let currentApiKey = '';
 let conversationHistory = [];
@@ -641,13 +506,13 @@ let lastDetectedCode = '';
 let savedGoal = '';
 // --- Save/Load API Key from Local Storage ---
-function saveApiKey(provider, key) {
-  localStorage.setItem(`apiKey_${provider}`, key);
   updateApiKeyStatus(true);
 }
-function loadApiKey(provider) {
-  return localStorage.getItem(`apiKey_${provider}`) || '';
 }
 function updateApiKeyStatus(isSuccess) {
@@ -662,75 +527,13 @@ function updateApiKeyStatus(isSuccess) {
 }
 confirmApiKeyBtn.addEventListener('click', () => {
-  const provider = providerSelect.value;
   currentApiKey = apiKeyInput.value.trim();
-  saveApiKey(provider, currentApiKey);
 });
-// --- Initialize Models and API Key on Load ---
-function populateModels() {
-  const selectedProvider = providerSelect.value;
-  const providerInfo = PROVIDERS[selectedProvider];
-  modelSelect.innerHTML = ''; // Clear existing options
-  if (providerInfo && providerInfo.models) {
-    providerInfo.models.forEach(model => {
-      const option = document.createElement('option');
-      option.value = model.value;
-      option.textContent = model.label;
-      modelSelect.appendChild(option);
-    });
-  }
-  // Update API Key input based on selected provider
-  apiKeyInput.value = loadApiKey(selectedProvider);
-  currentApiKey = apiKeyInput.value.trim();
-  apiKeyInput.placeholder = PROVIDERS[selectedProvider].apiKeyLabel;
-  // Show/hide multi-modal model selection
-  if (providerInfo.supportsMultiModal) {
-    multiModalSelection.style.display = 'flex';
-    // Populate vision and OCR models specific to HuggingFace if selected
-    if (selectedProvider === 'huggingface') {
-      visionModelSelect.innerHTML = '';
-      ocrModelSelect.innerHTML = '';
-      PROVIDERS.huggingface.models.forEach(model => {
-        if (model.label.includes('(Vision)')) {
-          const option = document.createElement('option');
-          option.value = model.value;
-          option.textContent = model.label;
-          visionModelSelect.appendChild(option);
-        } else if (model.label.includes('(OCR)')) {
-          const option = document.createElement('option');
-          option.value = model.value;
-          option.textContent = model.label;
-          ocrModelSelect.appendChild(option);
-        }
-      });
-      // Add a "None" option for OCR if no OCR model is needed for a specific task
-      const noneOcrOption = document.createElement('option');
-      noneOcrOption.value = 'none';
-      noneOcrOption.textContent = 'None (ไม่ใช้ OCR)';
-      ocrModelSelect.appendChild(noneOcrOption);
-    } else {
-        // For other providers, ensure they have default options or are handled
-        // For simplicity, we can default to specific models or clear them if not relevant
-        // This part might need further refinement based on actual multi-modal APIs
-        visionModelSelect.innerHTML = `
-          <option value="default_vision">Default Vision Model</option>
-        `;
-        ocrModelSelect.innerHTML = `
-          <option value="default_ocr">Default OCR Model</option>
-          <option value="none">None (ไม่ใช้ OCR)</option>
-        `;
-    }
-  } else {
-    multiModalSelection.style.display = 'none';
-  }
-}
-providerSelect.addEventListener('change', populateModels);
-document.addEventListener('DOMContentLoaded', populateModels);
 // --- System Preset and Custom Prompt ---
 systemPresetSelect.addEventListener('change', (event) => {
@@ -745,7 +548,7 @@ systemPresetSelect.addEventListener('change', (event) => {
 function addMessage(text, sender, imageUrl = null, codeLanguage = null) {
   const messageDiv = document.createElement('div');
   messageDiv.classList.add('message95', sender);
   if (imageUrl) {
     const img = document.createElement('img');
     img.src = imageUrl;
@@ -767,7 +570,7 @@ function addMessage(text, sender, imageUrl = null, codeLanguage = null) {
     const language = match[1] || 'plaintext';
     const code = match[2];
     // Store the last detected code if it's the latest message and from AI
     if (sender === 'ai') {
       lastDetectedCode = code;
@@ -921,9 +724,7 @@ chatForm.addEventListener('submit', async (e) => {
     return;
   }
-  const selectedProvider = providerSelect.value;
   const selectedModel = modelSelect.value;
-  const providerInfo = PROVIDERS[selectedProvider];
   const apiKey = currentApiKey;
   const systemPreset = systemPresetSelect.value;
   let systemPrompt = '';
@@ -932,471 +733,5 @@ chatForm.addEventListener('submit', async (e) => {
     systemPrompt = customSystemPromptInput.value.trim();
   } else if (systemPreset === 'code-full') {
     if (lastDetectedCode) {
-      systemPrompt = `คุณคือผู้ช่วยพัฒนา��ว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ โค้ดทั้งหมดจะต้องถูกเขียนใน code block เดียว เพื่อเป็นไฟล์โค้ดที่สมบูรณ์และพร้อมใช้งาน โดยไม่มีการแยกโค้ด HTML และ JavaScript ในการตอบกลับของคุณ ให้เอาต์พุตเฉพาะโค้ด HTML โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต ผู้ใช้ได้ให้โค้ด HTML/CSS/JS ล่าสุดแก่คุณแล้ว และต้องการให้คุณช่วยเหลือในการพัฒนาต่อ. โค้ดปัจจุบันคือ: \n\`\`\`html\n${lastDetectedCode}\n\`\`\`\nเป้าหมายของโค้ดนี้คือ: ${savedGoal || 'ไม่ระบุ'}.`;
-    } else {
-      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ โค้ดทั้งหมดจะต้องถูกเขียนใน code block เดียว เพื่อเป็นไฟล์โค้ดที่สมบูรณ์และพร้อมใช้งาน โดยไม่มีการแยกโค้ด HTML และ JavaScript ในการตอบกลับของคุณ ให้เอาต์พุตเฉพาะโค้ด HTML โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต`;
-    }
-  } else if (systemPreset === 'code-function') {
-    if (lastDetectedCode) {
-      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ สำหรับการตอบกลับที่เกี่ยวข้องกับโค้ด ให้คุณตอบกลับเฉพาะโค้ดที่เกี่ยวข้องกับฟังก์ชันหรือส่วนที่แก้ไขเท่านั้น หากคุณให้ไฟล์โค้ดที่สมบูรณ์ คุณจะต้องตอบกลับเฉพาะโค้ด HTML เท่านั้น โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต ผู้ใช้ได้ให้โค้ด HTML/CSS/JS ล่าสุดแก่คุณแล้ว และต้องการให้คุณช่วยเหลือในการพัฒนาต่อ. โค้ดปัจจุบันคือ: \n\`\`\`html\n${lastDetectedCode}\n\`\`\`\nเป้าหมายของโค้ดนี้คือ: ${savedGoal || 'ไม่ระบุ'}.`;
-    } else {
-      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูง��นการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ สำหรับการตอบกลับที่เกี่ยวข้องกับโค้ด ให้คุณตอบกลับเฉพาะโค้ดที่เกี่ยวข้องกับฟังก์ชันหรือส่วนที่แก้ไขเท่านั้น หากคุณให้ไฟล์โค้ดที่สมบูรณ์ คุณจะต้องตอบกลับเฉพาะโค้ด HTML เท่านั้น โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต`;
-    }
-  } else if (systemPreset === 'multimodal') {
-    systemPrompt = `คุณคือผู้ช่วย Multi-Modal AI ที่เชี่ยวชาญในการวิเคราะห์รูปภาพ, ข้อความ, และเอกสาร. คุณสามารถตอบคำถามเกี่ยวกับเนื้อหาในไฟล์ที่แนบมา, สรุปข้อมูล, หรือดึงข้อความจากรูปภาพโดยใช้ OCR. เมื่อมีการร้องขอวิเคราะห์รูปภาพหรือ OCR ให้ใช้ความสามารถเหล่านั้นเพื่อตอบคำถาม. หากมีข้อมูลจากไฟล์แนบหลายประเภท ให้พยายามผสานรวมข้อมูลเหล่านั้นเพื่อการตอบสนองที่ครอบคลุม.`;
-  } else { // general
-    systemPrompt = `คุณคือ AI ผู้ช่วยที่สุภาพและให้ข้อมูลที่เป็นประโยชน์`;
-  }
-  // Clear previous error
-  errorMessageDiv.style.display = 'none';
-  if (!apiKey && selectedProvider !== 'ollama') {
-    displayError("กรุณาใส่ API Key ของคุณ");
-    return;
-  }
-  let userContent = [];
-  if (userMessage) {
-    userContent.push({ type: 'text', text: userMessage });
-  }
-  for (const fileObj of attachedFiles) {
-    const file = fileObj.file;
-    if (fileObj.type === 'image') {
-      try {
-        const base64 = await readFileAsBase64(file);
-        userContent.push({ type: 'image_url', image_url: { url: `data:${file.type};base64,${base64}` } });
-        addMessage(`แนบรูปภาพ: ${file.name}`, 'user', `data:${file.type};base64,${base64}`);
-      } catch (error) {
-        displayError(`ไม่สามารถอ่านไฟล์รูปภาพได้: ${error.message}`);
-        return;
-      }
-    } else if (fileObj.type === 'text') {
-      try {
-        const textContent = await readFileAsText(file);
-        userContent.push({ type: 'text', text: `เนื้อหาจากไฟล์ ${file.name}:\n\`\`\`\n${textContent}\n\`\`\`` });
-        addMessage(`แนบไฟล์ข้อความ: ${file.name}`, 'user');
-      } catch (error) {
-        displayError(`ไม่สามารถอ่านไฟล์ข้อความได้: ${error.message}`);
-        return;
-      }
-    } else if (fileObj.type === 'pdf' || fileObj.type === 'docx' || fileObj.type === 'xlsx') {
-      // For PDF, DOCX, XLSX, we need to inform the model that we have these files
-      // Actual content extraction would require a backend or a dedicated library
-      userContent.push({ type: 'text', text: `(มีไฟล์ ${fileObj.type.toUpperCase()} แนบมา: ${file.name}. โปรดพิจารณาข้อมูลจากไฟล์นี้ในการตอบกลับ หากต้องการวิเคราะห์เนื้อหา ให้แจ้งฉันเพื่อประมวลผล)` });
-      addMessage(`แนบไฟล์ ${fileObj.type.toUpperCase()}: ${file.name}`, 'user');
-    }
-  }
-  if (userContent.length === 0) {
-      displayError("กรุณาพิมพ์ข้อความหรือแนบไฟล์");
-      return;
-  }
-  addMessage(userMessage, 'user');
-  userInput.value = '';
-  fileNameSpan.textContent = '';
-  attachedFiles = []; // Clear attached files after sending
-  // Prepare message for API
-  let messages = [];
-  if (systemPrompt) {
-    messages.push({ role: 'system', content: systemPrompt });
-  }
-  // Add previous conversation history
-  messages = messages.concat(conversationHistory);
-  // Add current user message
-  if (selectedProvider === 'anthropic' || selectedProvider === 'openai' || selectedProvider === 'xai' || selectedProvider === 'google') {
-    messages.push({ role: 'user', content: userContent });
-  } else if (selectedProvider === 'ollama') {
-    // Ollama's chat endpoint expects content as string for text models
-    // For vision models, it can handle image_data
-    let contentForOllama = [];
-    for (const part of userContent) {
-      if (part.type === 'text') {
-        contentForOllama.push(part.text);
-      } else if (part.type === 'image_url') {
-        const base64 = part.image_url.url.split(',')[1];
-        contentForOllama.push({ type: 'image', image_data: base64 });
-      }
-    }
-    messages.push({ role: 'user', content: contentForOllama.join('\n') }); // Concatenate text parts
-  } else if (selectedProvider === 'huggingface') {
-      // HuggingFace has various model types and endpoints.
-      // This is a simplified approach. For actual multi-modal, we'd need separate calls.
-      // For general text models, it expects a single string input.
-      // For vision models, it expects image bytes.
-      // We will handle multi-modal specifically below.
-      messages.push({ role: 'user', content: userContent.filter(p => p.type === 'text').map(p => p.text).join('\n') });
-  }
-  let requestBody = {};
-  let url = providerInfo.endpoint;
-  let headers = {
-    'Content-Type': 'application/json',
-  };
-  if (selectedProvider !== 'ollama') { // Ollama doesn't need API key in header
-    headers['Authorization'] = `Bearer ${apiKey}`;
-  }
-  // Logic for Multi-Modal HuggingFace calls
-  if (selectedProvider === 'huggingface' && (attachedFiles.some(f => f.type === 'image') || systemPreset === 'multimodal')) {
-    const visionModel = visionModelSelect.value;
-    const ocrModel = ocrModelSelect.value;
-    let imageFile = attachedFiles.find(f => f.type === 'image')?.file;
-    if (!imageFile && systemPreset === 'multimodal') {
-        displayError("โปรดแนบรูปภาพสำหรับการวิเคราะห์ Multi-Modal.");
-        return;
-    }
-    let imageBase64 = null;
-    if (imageFile) {
-        try {
-            imageBase64 = await readFileAsBase64(imageFile);
-        } catch (error) {
-            displayError(`ไม่สามารถอ่านไฟล์รูปภาพได้: ${error.message}`);
-            return;
-        }
-    }
-    let visionAnalysis = '';
-    let ocrText = '';
-    // Step 1: Call Vision Model (if applicable)
-    if (visionModel && visionModel !== 'none' && imageBase64) {
-      const visionEndpoint = PROVIDERS.huggingface.specificModelEndpoints[visionModel] || `${providerInfo.endpoint}${visionModel}`;
-      try {
-        const visionResponse = await fetch(visionEndpoint, {
-          method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${apiKey}`,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            inputs: `data:image/jpeg;base64,${imageBase64}`,
-            parameters: { return_full_text: false } // Adjust parameters as needed by model
-          })
-        });
-        if (!visionResponse.ok) {
-          const errorData = await visionResponse.json();
-          throw new Error(`Vision API error: ${visionResponse.statusText} - ${JSON.stringify(errorData)}`);
-        }
-        const visionData = await visionResponse.json();
-        // Parse visionData based on model output format (this is generic)
-        visionAnalysis = `\n[ข้อมูลจาก Vision Model (${visionModel})]:\n${JSON.stringify(visionData, null, 2)}\n`;
-      } catch (error) {
-        displayError(`ข้อผิดพลาดในการวิเคราะห์รูปภาพด้วย ${visionModel}: ${error.message}`);
-        return;
-      }
-    }
-    // Step 2: Call OCR Model (if applicable)
-    if (ocrModel && ocrModel !== 'none' && imageBase64) {
-      const ocrEndpoint = PROVIDERS.huggingface.specificModelEndpoints[ocrModel] || `${providerInfo.endpoint}${ocrModel}`;
-      try {
-        const ocrResponse = await fetch(ocrEndpoint, {
-          method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${apiKey}`,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            inputs: `data:image/jpeg;base64,${imageBase64}`
-          })
-        });
-        if (!ocrResponse.ok) {
-          const errorData = await ocrResponse.json();
-          throw new Error(`OCR API error: ${ocrResponse.statusText} - ${JSON.stringify(errorData)}`);
-        }
-        const ocrData = await ocrResponse.json();
-        // Parse OCR data based on model output format (this is generic)
-        ocrText = `\n[ข้อมูลจาก OCR Model (${ocrModel})]:\n${ocrData.extracted_text || JSON.stringify(ocrData, null, 2)}\n`;
-      } catch (error) {
-        displayError(`ข้อผิดพลาดในการทำ OCR ด้วย ${ocrModel}: ${error.message}`);
-        return;
-      }
-    }
-    // Combine vision/OCR results with user's text message
-    let combinedPrompt = userMessage;
-    if (visionAnalysis) combinedPrompt += visionAnalysis;
-    if (ocrText) combinedPrompt += ocrText;
-    // Now send the combined prompt to a text-based model if needed, or just display results
-    // For HuggingFace, if a primary text model is chosen, we'd send to it.
-    // Assuming the main model select should be a text model for combined analysis
-    url = `${providerInfo.endpoint}${selectedModel}`; // Use the primary selected model for text processing
-    requestBody = {
-      inputs: combinedPrompt,
-      parameters: {
-        max_new_tokens: 1000,
-        temperature: 0.7,
-        top_p: 0.9,
-      },
-      options: {
-        use_cache: false // Prevent caching for dynamic inputs
-      }
-    };
-    headers['Content-Type'] = 'application/json'; // Ensure correct content type for JSON body
-  } else if (selectedProvider === 'huggingface') {
-    // Normal text-only HuggingFace request
-    url = `${providerInfo.endpoint}${selectedModel}`;
-    requestBody = {
-      inputs: messages[messages.length - 1].content.filter(p => p.type === 'text').map(p => p.text).join('\n'),
-      parameters: {
-        max_new_tokens: 1000,
-        temperature: 0.7,
-        top_p: 0.9,
-      },
-      options: {
-        use_cache: false
-      }
-    };
-    headers['Content-Type'] = 'application/json';
-  } else if (selectedProvider === 'google') {
-      url += `${selectedModel}:generateContent?key=${apiKey}`;
-      let contents = [];
-      let currentContent = {
-          role: "user",
-          parts: []
-      };
-      for (const part of userContent) {
-          if (part.type === 'text') {
-              currentContent.parts.push({ text: part.text });
-          } else if (part.type === 'image_url') {
-              currentContent.parts.push({
-                  inline_data: {
-                      mime_type: part.image_url.url.split(';')[0].split(':')[1],
-                      data: part.image_url.url.split(',')[1]
-                  }
-              });
-          }
-      }
-      contents.push(currentContent);
-      // Convert history to Gemini format
-      for (let i = 0; i < conversationHistory.length; i++) {
-        const item = conversationHistory[i];
-        if (item.role === 'system') {
-          // Gemini doesn't have a direct 'system' role in chat, often absorbed into initial user prompt or ignored.
-          // For simplicity, we can prepend to the first user message or ignore.
-          // For now, we'll try to add it as a user message that guides the AI.
-          if (i === 0 && item.content) { // Only apply if it's the very first system prompt
-              contents.unshift({
-                  role: "user",
-                  parts: [{ text: item.content }]
-              });
-              contents.unshift({
-                  role: "model",
-                  parts: [{ text: "เข้าใจแล้ว." }]
-              });
-          }
-        } else if (item.role === 'user') {
-          contents.push({ role: "user", parts: [{ text: item.content.text || item.content }] });
-        } else if (item.role === 'assistant') {
-          contents.push({ role: "model", parts: [{ text: item.content }] });
-        }
-      }
-      requestBody = {
-          contents: contents,
-          generationConfig: {
-              maxOutputTokens: 2000,
-              temperature: 0.7,
-              topP: 0.9
-          }
-      };
-      headers['Content-Type'] = 'application/json';
-  } else if (selectedProvider === 'ollama') {
-    requestBody = {
-      model: selectedModel,
-      messages: messages,
-      stream: providerInfo.isStream
-    };
-  } else if (selectedProvider === 'anthropic') {
-    requestBody = {
-      model: selectedModel,
-      messages: messages.map(msg => ({ // Anthropic expects 'user' and 'assistant' roles, 'system' handled by system_prompt
-        role: msg.role === 'system' ? 'user' : msg.role, // Temporarily map system to user for Anthropic's initial context
-        content: msg.content
-      })),
-      max_tokens: 4096,
-      stream: providerInfo.isStream
-    };
-    if (systemPrompt) {
-      requestBody.system = systemPrompt; // Anthropic's dedicated system_prompt field
-    }
-  } else { // OpenAI, Groq, xAI
-    requestBody = {
-      model: selectedModel,
-      messages: messages.map(msg => {
-          if (Array.isArray(msg.content) && selectedProvider === 'openai') {
-              // OpenAI can take array of content parts
-              return { role: msg.role, content: msg.content };
-          } else if (msg.role === 'system') {
-              return { role: 'system', content: msg.content };
-          } else {
-              // For other providers or if content is string, just use text
-              return { role: msg.role, content: typeof msg.content === 'string' ? msg.content : (msg.content.text || msg.content.map(p => p.text).join('\n')) };
-          }
-      }),
-      stream: providerInfo.isStream
-    };
-  }
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: headers,
-      body: JSON.stringify(requestBody)
-    });
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(`API Error: ${response.status} - ${JSON.stringify(errorData)}`);
-    }
-    if (providerInfo.isStream && selectedProvider !== 'google') { // Handle streaming for OpenAI, Groq, xAI, Ollama
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let fullResponse = '';
-      let assistantMessageDiv = null;
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        const chunk = decoder.decode(value);
-        if (selectedProvider === 'ollama') {
-          // Ollama can send multiple JSON objects in one chunk
-          chunk.split('\n').filter(Boolean).forEach(line => {
-            try {
-              const data = JSON.parse(line);
-              if (data.done === false && data.message && data.message.content) {
-                fullResponse += data.message.content;
-                if (!assistantMessageDiv) {
-                  assistantMessageDiv = document.createElement('div');
-                  assistantMessageDiv.classList.add('message95', 'ai');
-                  messagesDiv.appendChild(assistantMessageDiv);
-                  messagesDiv.scrollTop = messagesDiv.scrollHeight;
-                }
-                assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
-              } else if (data.done === true) {
-                // Done, finalize the message
-              }
-            } catch (e) {
-              console.error("Error parsing Ollama stream chunk:", e, line);
-            }
-          });
-        } else if (selectedProvider === 'huggingface') {
-          // HuggingFace typically does not stream, so this block might not be hit for HF models
-          // If a streaming HF endpoint is used, this logic would need to be adapted
-          fullResponse += chunk;
-          if (!assistantMessageDiv) {
-            assistantMessageDiv = document.createElement('div');
-            assistantMessageDiv.classList.add('message95', 'ai');
-            messagesDiv.appendChild(assistantMessageDiv);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-          }
-          assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
-        } else { // OpenAI, Groq, xAI
-          chunk.split('\n').filter(Boolean).forEach(line => {
-            if (line.startsWith('data: ')) {
-              const data = JSON.parse(line.substring(6));
-              if (data.choices && data.choices.length > 0) {
-                const delta = data.choices[0].delta;
-                if (delta && delta.content) {
-                  fullResponse += delta.content;
-                  if (!assistantMessageDiv) {
-                    assistantMessageDiv = document.createElement('div');
-                    assistantMessageDiv.classList.add('message95', 'ai');
-                    messagesDiv.appendChild(assistantMessageDiv);
-                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
-                  }
-                  assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
-                }
-              }
-            }
-          });
-        }
-      }
-      if (assistantMessageDiv) {
-          hljs.highlightAll(); // Re-highlight all code blocks after stream finishes
-          conversationHistory.push({ role: 'assistant', content: fullResponse });
-          const codeMatch = fullResponse.match(/```(\w+)?\n([\s\S]+?)\n```/);
-          if (codeMatch) {
-              lastDetectedCode = codeMatch[2];
-              savedCodeDisplay.textContent = lastDetectedCode;
-              contextSaveArea.style.display = 'block';
-              messagesDiv.scrollTop = messagesDiv.scrollHeight;
-          }
-      }
-    } else if (selectedProvider === 'google') {
-        const result = await response.json();
-        let fullResponse = '';
-        if (result.candidates && result.candidates[0] && result.candidates[0].content && result.candidates[0].content.parts) {
-            fullResponse = result.candidates[0].content.parts.map(part => part.text).join('');
-        }
-        addMessage(fullResponse, 'ai');
-        conversationHistory.push({ role: 'assistant', content: fullResponse });
-        const codeMatch = fullResponse.match(/```(\w+)?\n([\s\S]+?)\n```/);
-        if (codeMatch) {
-            lastDetectedCode = codeMatch[2];
-            savedCodeDisplay.textContent = lastDetectedCode;
-            contextSaveArea.style.display = 'block';
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-        }
-        hljs.highlightAll();
-    } else { // Handle non-streaming responses (e.g., HuggingFace Inference API, Anthropic)
-      const data = await response.json();
-      let assistantResponseText = '';
-      if (selectedProvider === 'anthropic') {
-        assistantResponseText = data.content[0].text;
-      } else if (selectedProvider === 'huggingface') {
-          // HuggingFace response varies greatly by model
-          // This is a generic handling for text generation models
-          if (Array.isArray(data) && data[0] && data[0].generated_text) {
-              assistantResponseText = data[0].generated_text;
-          } else {
-              assistantResponseText = JSON.stringify(data, null, 2); // Fallback for unexpected formats
-          }
-      } else { // Fallback for other non-streaming or new providers
-          assistantResponseText = data.choices[0].message.content;
-      }
-      addMessage(assistantResponseText, 'ai');
-      conversationHistory.push({ role: 'assistant', content: assistantResponseText });
-      const codeMatch = assistantResponseText.match(/```(\w+)?\n([\s\S]+?)\n```/);
-      if (codeMatch) {
-          lastDetectedCode = codeMatch[2];
-          savedCodeDisplay.textContent = lastDetectedCode;
-          contextSaveArea.style.display = 'block';
-          messagesDiv.scrollTop = messagesDiv.scrollHeight;
-      }
-      hljs.highlightAll();
-    }
-  } catch (error) {
-    displayError(error.message);
-    console.error("Fetch error:", error);
-  } finally {
-    chatForm.querySelector('button[type="submit"]').disabled = false;
-    userInput.focus();
-  }
-});
-</script>
-</body>
-</html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>AI Chat - Typhoon & Qwen2.5-Coder</title>
+  <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css">
   <style>
     html, body { height: 100%; margin: 0; }
       z-index: 1;
     }
     .win95window.fullscreen {
+      position: ;
       left: 0; top: 0; right: 0; bottom: 0;
       min-width: 100vw; min-height: 100vh; max-width: none; max-height: none;
       width: 100vw; height: 100vh;
       background-position: 6px 7px;
       background-size: 16px 16px;
     }
+    #contextSaveArea95 {
+       padding: 10px 10px 12px;
+       background: #f8f8e0;
+       border-top: 2px solid #fff;
+       border-bottom: 2px solid #808080;
+       display: none;
+       font-size: 0.98em;
+     }
     #contextSaveArea95 h4 { margin: 0 0 8px 0; color: #444; font-size: 1.08em; }
+    #contextSaveArea95 pre {
+       background: #fff;
+       border: 2px inset #808080;
+       padding: 8px 5px;
+       font-size: 0.95em;
+       max-height: 120px;
+       overflow: auto;
+       margin: 7px 0;
+       white-space: pre-wrap;
+       word-break: break-all;
+     }
     #contextSaveArea95 label { font-weight: bold; }
+    #contextSaveArea95 input[type="text"] {
+       width: 98%;
+       min-width: 0;
+       border: 2px inset #808080;
+       background: #fff;
+       font-size: 1em;
+       margin-bottom: 3px;
+       padding: 4px 8px;
+     }
+    #contextSaveArea95 button {
+       margin-top: 6px;
+       font-size: 1em;
+       background: #e0e0e0;
+       border: 2px outset #fff;
+       color: #000;
+       padding: 2.5px 14px;
+       cursor: pointer;
+       border-radius: 0;
+     }
     #contextSaveArea95 button:active { background: #c0c0c0; border: 2px inset #808080; }
     #contextSaveArea95 button:disabled { background: #e0e0e0; color: #bbb; border: 2px outset #b0b0b0; }
     .model-pair-selection {
       max-width: 180px;
     }
     @media (max-width: 650px) {
+      .win95window {
+         min-width: 0;
+         max-width: 98vw;
+         box-shadow: 1px 2px 0px #0006, 0 0 0 2px #6664;
+       }
       .win95content { padding: 0; }
+      .settings95 {
+         flex-direction: column;
+         align-items: flex-start;
+         gap: 4px;
+         padding: 8px 4px;
+       }
       .system-preset-area {
         flex-direction: column;
         align-items: flex-start;
         gap: 4px;
         padding: 6px 4px;
       }
+      .input-area95 {
+         flex-direction: column;
+         gap: 8px;
+         padding: 8px 4px;
       }
+      .chat-container95 {
+         padding: 10px 2px;
+         font-size: 0.98em;
+       }
+      .dropzone95 {
+         font-size: 1em;
+         padding: 20px 2px 14px;
       }
     }
   </style>
       <span style="display:inline-block;width:18px;height:18px;background:#fff;border:1px solid #808080;margin-right:7px;box-shadow:inset 2px 2px #c0c0c0;">
         <span style="display:inline-block;width:9px;height:9px;background:#008080;margin:4px 0 0 4px;vertical-align:middle;"></span>
       </span>
+      AI Chat - Typhoon & Qwen2.5-Coder
     </div>
     <div class="win95controls">
       <button id="maximizeBtn" title="เต็มจอ">&#9633;</button>
   </div>
   <div class="win95content">
     <form class="settings95" id="settingsForm95" autocomplete="off" onsubmit="return false;">
+      <label for="apiKey95">HuggingFace API Key:</label>
+      <input type="text" id="apiKey95" placeholder="กรอก HuggingFace API Key">
       <button id="confirmApiKeyBtn95" type="button">บันทึก</button>
       <span class="api-status" id="apiKeyStatus95"></span>
     </form>
+    <div class="model-pair-selection" id="multiModalSelection">
+      <label for="modelSelect95">เลือกโมเดล:</label>
+      <select id="modelSelect95">
+        <option value="scb10x/typhoon-v1.5x-72b-instruct">Typhoon OCR 72B</option>
         <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder 32B</option>
       </select>
     </div>
     <div class="system-preset-area">
       <label for="systemPresetSelect95">ระบบ:</label>
       <select id="systemPresetSelect95">
       </select>
       <input type="text" id="customSystemPrompt95" placeholder="ใส่ System Prompt ของคุณ" style="display:none; flex: 1; min-width: 200px;">
     </div>
     <div id="contextSaveArea95">
       <h4>Context ปัจจุบัน</h4>
       <div id="warningMessage95" style="color:orange;font-weight:bold;"></div>
       <button id="confirmSaveBtn95">ยืนยัน context และเริ่มแชทใหม่</button>
     </div>
     <div class="chat-container95" id="messagesDiv95">
+      <div class="message95 ai">สวัสดี! AI Chat พร้อมใช้งาน 🎉<br>เลือกระหว่าง Typhoon OCR 72B หรือ Qwen2.5-Coder 32B!</div>
     </div>
     <form id="chatForm95" class="input-area95" autocomplete="off">
       <button type="button" class="file-attach-btn" id="fileAttachBtn" title="แนบไฟล์">
 const win95window = document.getElementById('win95window');
 const maximizeBtn = document.getElementById('maximizeBtn');
 let isFullscreen = false;
 maximizeBtn.onclick = function() {
   isFullscreen = !isFullscreen;
   win95window.classList.toggle('fullscreen', isFullscreen);
   maximizeBtn.title = isFullscreen ? "คืนหน้าต่าง" : "เต็มจอ";
 };
+// --- API Setup ---
 const apiKeyInput = document.getElementById('apiKey95');
 const confirmApiKeyBtn = document.getElementById('confirmApiKeyBtn95');
 const apiKeyStatus = document.getElementById('apiKeyStatus95');
 const fileInput = document.getElementById('fileInput');
 const fileNameSpan = document.getElementById('fileName');
 const dropzone = document.getElementById('dropzone95');
+const modelSelect = document.getElementById('modelSelect95');
 let currentApiKey = '';
 let conversationHistory = [];
 let savedGoal = '';
 // --- Save/Load API Key from Local Storage ---
+function saveApiKey(key) {
+  localStorage.setItem('huggingface_apiKey', key);
   updateApiKeyStatus(true);
 }
+function loadApiKey() {
+  return localStorage.getItem('huggingface_apiKey') || '';
 }
 function updateApiKeyStatus(isSuccess) {
 }
 confirmApiKeyBtn.addEventListener('click', () => {
   currentApiKey = apiKeyInput.value.trim();
+  saveApiKey(currentApiKey);
 });
+// Initialize API key on load
+apiKeyInput.value = loadApiKey();
+currentApiKey = apiKeyInput.value.trim();
 // --- System Preset and Custom Prompt ---
 systemPresetSelect.addEventListener('change', (event) => {
 function addMessage(text, sender, imageUrl = null, codeLanguage = null) {
   const messageDiv = document.createElement('div');
   messageDiv.classList.add('message95', sender);
   if (imageUrl) {
     const img = document.createElement('img');
     img.src = imageUrl;
     const language = match[1] || 'plaintext';
     const code = match[2];
     // Store the last detected code if it's the latest message and from AI
     if (sender === 'ai') {
       lastDetectedCode = code;
     return;
   }
   const selectedModel = modelSelect.value;
   const apiKey = currentApiKey;
   const systemPreset = systemPresetSelect.value;
   let systemPrompt = '';
     systemPrompt = customSystemPromptInput.value.trim();
   } else if (systemPreset === 'code-full') {
     if (lastDetectedCode) {
+      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ โค้ดทั้งหมดจะต้องถูกเขียนใน code block เดียว เพื่อเป็นไฟล์โค้ดที่สมบูรณ์และพร้อมใช้งาน โดยไม่มีการแยกโค้ด HTML และ JavaScript ในการตอบกลับของคุณ ให้เอาต์พุตเฉพาะโค้ด HTML โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต ผู้ใช้ได้ให้โค้ด HTML/CSS/JS ล่าสุดแก่คุณแล้ว และต้องการให้คุณช่วยเหลือในการพัฒนาต่อ. โค้ดปัจจุบันคือ: \n\`\`\`html\n${lastDetectedCode}\n\`\`\`\nเป้าหมายของโค้ดนี้คือ: ${saved
+</html>