Update index.html

index.html

@@ -141,6 +141,30 @@
       margin-left: 4px;
       min-width: 80px;
     }
+    .system-preset-area {
+      background: #f0f0f0;
+      border-bottom: 2px solid #808080;
+      padding: 8px 12px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      font-size: 0.95em;
+      gap: 8px;
+    }
+    .system-preset-area label {
+      margin-right: 4px;
+      font-weight: bold;
+    }
+    .system-preset-area select {
+      font-family: inherit;
+      font-size: 1em;
+      background: #fff;
+      border: 2px inset #808080;
+      padding: 2px 6px;
+      outline: none;
+      min-width: 120px;
+      max-width: 200px;
+    }
     .chat-container95 {
       flex: 1 1 0%;
       overflow-y: auto;
@@ -319,6 +343,12 @@
         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; 
@@ -358,6 +388,8 @@
         <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>
       </select>
       <label for="modelSelect95">โมเดล:</label>
       <select id="modelSelect95"></select>
@@ -366,6 +398,18 @@
       <button id="confirmApiKeyBtn95" type="button">บันทึก</button>
       <span class="api-status" id="apiKeyStatus95"></span>
     </form>
+    
+    <div class="system-preset-area">
+      <label for="systemPresetSelect95">ระบบ:</label>
+      <select id="systemPresetSelect95">
+        <option value="general">แชทธรรมดา</option>
+        <option value="code-full">ส่งโค้ดเต็ม</option>
+        <option value="code-function">ส่งเฉพาะฟังก์ชัน</option>
+        <option value="custom">กำหนดเอง</option>
+      </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>
@@ -376,7 +420,7 @@
       <button id="confirmSaveBtn95">ยืนยัน context และเริ่มแชทใหม่</button>
     </div>
     <div class="chat-container95" id="messagesDiv95">
-      <div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับ Anthropic Claude-4-Sonnet และ xAI Grok-3 ล่าสุด!</div>
+      <div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับหลาย AI Provider และมีระบบ preset ใหม่!</div>
     </div>
     <form id="chatForm95" class="input-area95" autocomplete="off">
       <button type="button" class="file-attach-btn" id="fileAttachBtn" title="แนบไฟล์">
@@ -412,7 +456,9 @@ const PROVIDERS = {
     models: [
       { value: "claude-3-5-sonnet-20241022", label: "Claude-3.5 Sonnet" },
       { value: "claude-3-5-haiku-20241022", label: "Claude-3.5 Haiku" },
-      { value: "claude-3-opus-20240229", label: "Claude-3 Opus" }
+      { value: "claude-3-opus-20240229", label: "Claude-3 Opus" },
+      { value: "claude-3-sonnet-20240229", label: "Claude-3 Sonnet" },
+      { value: "claude-3-haiku-20240307", label: "Claude-3 Haiku" }
     ],
     isStream: false,
     streamEndpoint: "https://api.anthropic.com/v1/messages"
@@ -424,8 +470,10 @@ const PROVIDERS = {
     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 (Reasoning)" },
-      { value: "grok-3-mini-fast-beta", label: "Grok-3 Mini Fast Beta (Reasoning)" }
+      { 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
   },
@@ -434,9 +482,11 @@ const PROVIDERS = {
     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
@@ -447,14 +497,50 @@ const PROVIDERS = {
     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: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+      { value: "o1-preview", label: "o1-preview" },
+      { value: "o1-mini", label: "o1-mini" }
     ],
     isStream: true
+  },
+  ollama: {
+    name: "Ollama (Local)",
+    endpoint: "http://localhost:11434/api/chat",
+    apiKeyLabel: "ไม่ต้องใส่ API Key",
+    models: [
+      { 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
+  },
+  huggingface: {
+    name: "HuggingFace",
+    endpoint: "https://api-inference.huggingface.co/models",
+    apiKeyLabel: "HuggingFace API Key",
+    models: [
+      { value: "microsoft/DialoGPT-medium", label: "DialoGPT Medium" },
+      { value: "microsoft/DialoGPT-large", label: "DialoGPT Large" },
+      { value: "facebook/blenderbot-400M-distill", label: "BlenderBot 400M" },
+      { value: "google/flan-t5-large", label: "Flan-T5 Large" },
+      { value: "bigscience/bloom-560m", label: "BLOOM 560M" }
+    ],
+    isStream: false
   }
 };
 
-const SYSTEM_PROMPT = "คุณคือผู้ช่วย AI ที่ช่วยเหลือด้านโค้ดและไอเดีย พร้อมอธิบายและยกตัวอย่างในบล็อก markdown (```) อย่างชัดเจน";
+// --- System Presets ---
+const SYSTEM_PRESETS = {
+  general: "คุณคือผู้ช่วย AI ที่ช่วยเหลือตอบคำถามและแชทธรรมดาได้ทุกเรื่อง",
+  "code-full": "คุณคือผู้ช่วยโปรแกรมเมอร์ เมื่อผู้ใช้ถามเกี่ยวกับโค้ด ให้ส่งโค้ดเต็มทั้งไฟล์กลับมาเสมอ ห้ามตัดย่อหรือใช้ ... ต้องแสดงโค้ดครบทุกบรรทัด",
+  "code-function": "คุณคือผู้ช่วยโปรแกรมเมอร์ เมื่อผู้ใช้ถามเกี่ยวกับโค้ด ให้ส่งเฉพาะฟังก์ชันหรือส่วนที่เกี่ยวข้องกับคำถาม ไม่ต้องส่งโค้ดทั้งไฟล์",
+  custom: "" // จะใช้ค่าจาก input
+};
+
 const PAYLOAD_CHAR_WARNING_THRESHOLD = 14000;
 
 // --- Elements
@@ -463,6 +549,8 @@ const modelSelect      = document.getElementById('modelSelect95');
 const apiKeyInput      = document.getElementById('apiKey95');
 const confirmApiKeyBtn = document.getElementById('confirmApiKeyBtn95');
 const apiKeyStatus     = document.getElementById('apiKeyStatus95');
+const systemPresetSelect = document.getElementById('systemPresetSelect95');
+const customSystemPrompt = document.getElementById('customSystemPrompt95');
 const chatForm         = document.getElementById('chatForm95');
 const userInput        = document.getElementById('userInput95');
 const messagesDiv      = document.getElementById('messagesDiv95');
@@ -525,13 +613,36 @@ function setModelOptions(providerKey) {
   PROVIDERS[providerKey].models.forEach(m =>
     modelSelect.innerHTML += `<option value="${m.value}">${m.label}</option>`
   );
+  
+  // บันทึกและโหลดโมเดลที่เลือกไว้
+  const savedModel = localStorage.getItem("ai95model_" + providerKey);
+  if (savedModel && PROVIDERS[providerKey].models.find(m => m.value === savedModel)) {
+    modelSelect.value = savedModel;
+  }
 }
 
 function setApiKeyLabel(providerKey) {
   apiKeyInput.placeholder = "กรอก " + PROVIDERS[providerKey].apiKeyLabel;
+  
+  // ซ่อน API Key input สำหรับ Ollama
+  if (providerKey === 'ollama') {
+    apiKeyInput.style.display = 'none';
+    confirmApiKeyBtn.style.display = 'none';
+    document.querySelector('label[for="apiKey95"]').style.display = 'none';
+  } else {
+    apiKeyInput.style.display = 'inline-block';
+    confirmApiKeyBtn.style.display = 'inline-block';
+    document.querySelector('label[for="apiKey95"]').style.display = 'inline-block';
+  }
 }
 
 function loadApiKey(providerKey) {
+  if (providerKey === 'ollama') {
+    apiKeyStatus.textContent = '✔️ Local Mode';
+    apiKeyStatus.style.color = '#008000';
+    return;
+  }
+  
   const k = localStorage.getItem("ai95key_" + providerKey) || "";
   apiKeyInput.value = k;
   if (k) {
@@ -548,9 +659,41 @@ function saveApiKey(providerKey, key) {
   apiKeyStatus.style.color = "#008000";
 }
 
-function getApiKey() { return apiKeyInput.value.trim(); }
+function saveModel(providerKey, model) {
+  localStorage.setItem("ai95model_" + providerKey, model);
+}
+
+function saveSystemPreset(preset) {
+  localStorage.setItem("ai95systemPreset", preset);
+}
+
+function loadSystemPreset() {
+  const saved = localStorage.getItem("ai95systemPreset");
+  if (saved) {
+    systemPresetSelect.value = saved;
+    if (saved === 'custom') {
+      customSystemPrompt.style.display = 'inline-block';
+      customSystemPrompt.value = localStorage.getItem("ai95customPrompt") || "";
+    }
+  }
+}
+
+function getApiKey() { 
+  const providerKey = getProviderKey();
+  return providerKey === 'ollama' ? 'local' : apiKeyInput.value.trim(); 
+}
+
 function getProviderKey() { return providerSelect.value; }
 function getModelValue() { return modelSelect.value; }
+
+function getCurrentSystemPrompt() {
+  const preset = systemPresetSelect.value;
+  if (preset === 'custom') {
+    return customSystemPrompt.value.trim() || SYSTEM_PRESETS.general;
+  }
+  return SYSTEM_PRESETS[preset] || SYSTEM_PRESETS.general;
+}
+
 function showError(msg) { errorDiv.textContent = msg || ""; errorDiv.style.display = msg ? "block" : "none"; }
 
 function addMessage(role, content) {
@@ -599,7 +742,7 @@ function showContextSaveArea(show, code = null, goal = '') {
 
 function clearChat() {
   chatHistory = [];
-  messagesDiv.innerHTML = '<div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับ Anthropic Claude-4-Sonnet และ xAI Grok-3 ล่าสุด!</div>';
+  messagesDiv.innerHTML = '<div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับหลาย AI Provider และมีระบบ preset ใหม่!</div>';
   latestCodeContext = null;
   showContextSaveArea(false, null, goalInput.value);
   showError('');
@@ -613,25 +756,34 @@ providerSelect.addEventListener('change', function() {
   showError('');
 });
 
-setModelOptions(getProviderKey());
-setApiKeyLabel(getProviderKey());
-loadApiKey(getProviderKey());
+// --- Model Change
+modelSelect.addEventListener('change', function() {
+  saveModel(getProviderKey(), getModelValue());
+});
 
-// --- API Key Save
-confirmApiKeyBtn.addEventListener('click', function() {
-  const key = getApiKey();
-  if (!key) {
-    apiKeyStatus.textContent = '';
-    showError("กรุณาใส่ API Key ก่อนกดบันทึก");
-    return;
+// --- System Preset Change
+systemPresetSelect.addEventListener('change', function() {
+  const preset = systemPresetSelect.value;
+  saveSystemPreset(preset);
+  
+  if (preset === 'custom') {
+    customSystemPrompt.style.display = 'inline-block';
+    customSystemPrompt.focus();
+  } else {
+    customSystemPrompt.style.display = 'none';
   }
-  saveApiKey(getProviderKey(), key);
-  showError("");
 });
 
-apiKeyInput.addEventListener('input', ()=>apiKeyStatus.textContent='');
+customSystemPrompt.addEventListener('input', function() {
+  localStorage.setItem("ai95customPrompt", this.value);
+});
+
+// --- Initialize
+setModelOptions(getProviderKey());
+setApiKeyLabel(getProviderKey());
+loadApiKey(getProviderKey());
+loadSystemPreset();
 
-// --- Anthropic API (Messages format
 // --- API Key Save
 confirmApiKeyBtn.addEventListener('click', function() {
   const key = getApiKey();
@@ -658,7 +810,7 @@ async function callAnthropicAPI(messages) {
     body: JSON.stringify({
       model: getModelValue(),
       max_tokens: 4096,
-      system: SYSTEM_PROMPT,
+      system: getCurrentSystemPrompt(),
       messages: messages
     })
   });
@@ -672,7 +824,61 @@ async function callAnthropicAPI(messages) {
   return data.content[0].text;
 }
 
-// --- xAI/OpenAI/Groq API (Chat format with streaming)
+// --- Ollama API
+async function callOllamaAPI(messages) {
+  const response = await fetch(PROVIDERS.ollama.endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      model: getModelValue(),
+      messages: [
+        { role: 'system', content: getCurrentSystemPrompt() },
+        ...messages
+      ],
+      stream: true
+    })
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Ollama API Error: ${response.status} - ${error}`);
+  }
+
+  return response;
+}
+
+// --- HuggingFace API
+async function callHuggingFaceAPI(messages) {
+  const modelName = getModelValue();
+  const lastMessage = messages[messages.length - 1];
+  
+  const response = await fetch(`${PROVIDERS.huggingface.endpoint}/${modelName}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${getApiKey()}`
+    },
+    body: JSON.stringify({
+      inputs: lastMessage.content,
+      parameters: {
+        max_length: 2048,
+        temperature: 0.7
+      }
+    })
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`HuggingFace API Error: ${response.status} - ${error}`);
+  }
+
+  const data = await response.json();
+  return data[0]?.generated_text || "ไม่สามารถสร้างคำตอบได้";
+}
+
+// --- Streaming API (xAI/OpenAI/Groq)
 async function callStreamingAPI(messages) {
   const provider = PROVIDERS[getProviderKey()];
   
@@ -685,7 +891,7 @@ async function callStreamingAPI(messages) {
     body: JSON.stringify({
       model: getModelValue(),
       messages: [
-        { role: 'system', content: SYSTEM_PROMPT },
+        { role: 'system', content: getCurrentSystemPrompt() },
         ...messages
       ],
       stream: true,
@@ -784,7 +990,9 @@ chatForm.addEventListener('submit', async function(e) {
   
   const message = userInput.value.trim();
   if (!message && attachedFiles.length === 0) return;
-  if (!getApiKey()) {
+  
+  const providerKey = getProviderKey();
+  if (providerKey !== 'ollama' && !getApiKey()) {
     showError("กรุณาใส่ API Key ก่อนส่งข้อความ");
     return;
   }
@@ -839,7 +1047,6 @@ chatForm.addEventListener('submit', async function(e) {
   }
   
   try {
-    const providerKey = getProviderKey();
     let aiResponse = '';
     
     if (providerKey === 'anthropic') {
@@ -850,9 +1057,20 @@ chatForm.addEventListener('submit', async function(e) {
       const code = extractCode(aiResponse);
       if (code) latestCodeContext = code;
       
+    } else if (providerKey === 'huggingface') {
+      aiResponse = await callHuggingFaceAPI(chatHistory);
+      const aiDiv = addMessage('ai', aiResponse);
+      
+      // Extract code from AI response
+      const code = extractCode(aiResponse);
+      if (code) latestCodeContext = code;
+      
     } else {
       // Streaming response for other providers
-      const response = await callStreamingAPI(chatHistory);
+      const response = providerKey === 'ollama' ? 
+        await callOllamaAPI(chatHistory) : 
+        await callStreamingAPI(chatHistory);
+        
       const aiDiv = addMessage('ai', '');
       const reader = response.body.getReader();
       const decoder = new TextDecoder();
@@ -869,13 +1087,11 @@ chatForm.addEventListener('submit', async function(e) {
         buffer = lines.pop() || '';
         
         for (const line of lines) {
-          if (line.startsWith('data: ')) {
-            const data = line.slice(6).trim();
-            if (data === '[DONE]') continue;
-            
+          if (providerKey === 'ollama') {
+            // Ollama format
             try {
-              const parsed = JSON.parse(data);
-              const delta = parsed.choices?.[0]?.delta?.content || '';
+              const parsed = JSON.parse(line);
+              const delta = parsed.message?.content || '';
               if (delta) {
                 fullResponse += delta;
                 aiDiv.innerHTML = renderWithHighlight(fullResponse.replace(/\n/g, '<br>'));
@@ -885,6 +1101,25 @@ chatForm.addEventListener('submit', async function(e) {
             } catch (e) {
               // Skip malformed JSON
             }
+          } else {
+            // OpenAI-compatible format
+            if (line.startsWith('data: ')) {
+              const data = line.slice(6).trim();
+              if (data === '[DONE]') continue;
+              
+              try {
+                const parsed = JSON.parse(data);
+                const delta = parsed.choices?.[0]?.delta?.content || '';
+                if (delta) {
+                  fullResponse += delta;
+                  aiDiv.innerHTML = renderWithHighlight(fullResponse.replace(/\n/g, '<br>'));
+                  aiDiv.querySelectorAll('pre code').forEach(block => hljs.highlightElement(block));
+                  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                }
+              } catch (e) {
+                // Skip malformed JSON
+              }
+            }
           }
         }
       }
@@ -928,4 +1163,7 @@ document.addEventListener('keydown', function(e) {
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
     chatForm.dispatchEvent(new Event('submit'));
   }
-});
+});
+</script>
+</body>
+</html>