Update index.html

index.html

@@ -1,19 +1,97 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Cursor Clone - Qwen</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+</head>
+<body class="bg-[#1e1e1e] text-[#ccc] h-screen flex flex-col overflow-hidden">
+
+<div class="h-9 bg-[#181818] flex items-center px-3 gap-2 border-b border-[#2d2d2d] text-sm">
+  <i class="bi bi-cursor-fill text-white"></i> <b>CURSOR CLONE</b> <span class="text-zinc-500">— Qwen 2.5 Coder</span>
+  <div class="ml-auto flex gap-2">
+    <input id="token" placeholder="hf_... pon tu token" class="bg-[#252526] border border-[#3d3d3d] rounded px-2 py-1 text-xs w-48"/>
+    <button onclick="download()" class="bg-white text-black px-3 py-1 rounded text-xs font-bold">Descargar</button>
+  </div>
+</div>
+
+<div class="flex flex-1 overflow-hidden">
+  <div class="w-12 bg-[#181818] flex flex-col items-center py-3 gap-5 border-r border-[#2d2d2d] text-xl">
+    <i class="bi bi-files text-white"></i><i class="bi bi-chat-left text-blue-400"></i>
+  </div>
+
+  <div class="flex-1 flex">
+    <!-- EDITOR -->
+    <div class="flex-1 flex flex-col border-r border-[#2d2d2d]">
+      <div class="h-8 bg-[#252526] flex items-center px-3 text-xs gap-2"><span class="bg-[#1e1e1e] px-3 py-1 border-t-2 border-blue-500">main.py</span><span id="ghostStatus" class="ml-auto text-zinc-500">TAB para aceptar</span></div>
+      <div id="monaco" class="flex-1"></div>
+    </div>
+
+    <!-- CHAT -->
+    <div class="w-[380px] bg-[#252526] flex flex-col">
+      <div class="p-3 font-bold text-xs uppercase tracking-widest border-b border-[#2d2d2d]">Qwen Chat</div>
+      <div id="chat" class="flex-1 overflow-y-auto p-3 space-y-3 text-sm">
+        <div class="bg-[#2d2d2d] p-3 rounded-lg">Hola! Soy tu Cursor casero. Puedo:<br>• Explicar código<br>• Generar funciones<br>• Refactorizar<br><br>Selecciona código y pregunta.</div>
+      </div>
+      <div class="p-2 border-t border-[#2d2d2d] flex gap-2">
+        <select id="lang" class="bg-[#3c3c3c] rounded px-2 py-2 text-xs"><option value="python">PY</option><option value="javascript">JS</option></select>
+        <input id="chatInput" placeholder="Ctrl+K para preguntar..." class="flex-1 bg-[#3c3c3c] rounded px-3 py-2 text-sm outline-none"/>
+        <button onclick="askChat()" class="bg-blue-600 px-3 rounded"><i class="bi bi-send"></i></button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
+<script>
+let editor, ghost="";
+require.config({paths:{'vs':'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs'}});
+require(['vs/editor/editor.main'],()=>{
+  editor=monaco.editor.create(document.getElementById('monaco'),{
+    value:"# Selecciona codigo y usa el chat ->\ndef quicksort(arr):\n pass",
+    language:'python', theme:'vs-dark', fontSize:14, minimap:{enabled:false}, automaticLayout:true, padding:{top:10}
+  });
+  const prov={provideInlineCompletions:async(m,p)=>{if(!ghost) return {items:[]}; return {items:[{insertText:ghost, range:new monaco.Range(p.lineNumber,p.column,p.lineNumber,p.column)}]}},freeInlineCompletions:()=>{}};
+  ['python','javascript','cpp'].forEach(l=>monaco.languages.registerInlineCompletionsProvider(l,prov));
+  let t; editor.onDidChangeModelContent(()=>{clearTimeout(t); t=setTimeout(runCopilot,800);});
+  editor.addAction({id:'ask', label:'Preguntar a Qwen', keybindings:[monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK], run:()=>{document.getElementById('chatInput').focus();}});
+});
+
+async function runCopilot(){
+  const token=document.getElementById('token').value.trim(); if(!token) return;
+  let code=editor.getValue(); if(code.length<10) return;
+  document.getElementById('ghostStatus').textContent="Pensando...";
+  try{
+    const r=await fetch("https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-1.5B-Instruct",{method:"POST", headers:{"Content-Type":"application/json", Authorization:`Bearer ${token}`}, body:JSON.stringify({inputs:code.slice(-700), parameters:{max_new_tokens:80, return_full_text:false}})});
+    const d=await r.json(); ghost=(d[0]?.generated_text||"").slice(0,150);
+    if(ghost){ editor.trigger('k','editor.action.inlineSuggest.trigger',{}); document.getElementById('ghostStatus').textContent="Sugerencia: TAB"; }
+  }catch(e){}
+}
+
+async function askChat(){
+  const input=document.getElementById('chatInput'); const token=document.getElementById('token').value.trim();
+  const question=input.value; if(!question) return;
+  let selected = editor.getModel().getValueInRange(editor.getSelection()) || editor.getValue().slice(-500);
+  const chat=document.getElementById('chat');
+  chat.innerHTML+=`<div class="bg-blue-600 text-white p-3 rounded-lg ml-6">${question}</div>`;
+  input.value=""; chat.scrollTop=chat.scrollHeight;
+
+  const prompt = `Eres un asistente de codigo. Contexto:\n\`\`\`\n${selected}\n\`\`\`\nPregunta: ${question}\nResponde conciso con codigo si aplica.`;
+  const loading=document.createElement('div'); loading.className="bg-[#2d2d2d] p-3 rounded-lg"; loading.textContent="Escribiendo..."; chat.appendChild(loading);
+
+  try{
+    const r=await fetch("https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-7B-Instruct",{method:"POST", headers:{"Content-Type":"application/json",...(token?{Authorization:`Bearer ${token}`}:{})}, body:JSON.stringify({inputs:prompt, parameters:{max_new_tokens:400, temperature:0.3}})});
+    const d=await r.json(); let answer = d[0]?.generated_text || "Error";
+    loading.innerHTML = `<pre class="whitespace-pre-wrap">${answer.replace(/</g,'&lt;')}</pre><button onclick="insert('${answer.replace(/'/g,"\\'").slice(0,200)}')" class="mt-2 bg-[#3c3c3c] px-2 py-1 rounded text-xs">Insertar</button>`;
+  }catch(e){ loading.textContent="Pon tu token HF arriba, es gratis"; }
+  chat.scrollTop=chat.scrollHeight;
+}
+
+function insert(t){ editor.executeEdits('', [{range: editor.getSelection(), text: t}]); }
+function download(){ const b=new Blob([editor.getValue()],{type:"text/plain"}); const a=document.createElement('a'); a.href=URL.createObjectURL(b); a.download="main.py"; a.click(); }
+document.getElementById('chatInput').addEventListener('keydown', e=>{ if(e.key==='Enter') askChat(); });
+document.getElementById('lang').addEventListener('change', e=>{ monaco.editor.setModelLanguage(editor.getModel(), e.target.value); });
+</script>
+</body>
 </html>