Spaces:

HarbourSOFT
/

Your-Code-Assistant-WebGPU

Running

App Files Files Community

HarbourSOFT commited on Oct 22, 2025

Commit

76dda73

verified ·

1 Parent(s): df016b4

Update index.html

Browse files

Files changed (1) hide show

index.html +85 -7

index.html CHANGED Viewed

@@ -26,6 +26,9 @@
     .ok{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.35)}
     .warn{background:rgba(243,156,18,.12);border-color:rgba(243,156,18,.35)}
     .err{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.35)}
   </style>
 </head>
 <body>
@@ -75,6 +78,12 @@
     </div>
   </div>
   <div class="card">
     <h3 style="margin:6px 0">Debug log</h3>
     <div id="log"></div>
@@ -82,7 +91,6 @@
   <script type="module">
     // ================= Configuration =================
-    // ONNX repo (3B Instruct), with multiple quantizations in onnx/ (model_q4.onnx, model_q4f16.onnx, model_int8.onnx, model_fp16.onnx, ...)
     const MODEL_ID = 'onnx-community/Qwen2.5-Coder-3B-Instruct';
     const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
     const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
@@ -94,6 +102,59 @@
       progress_callback: setProgress,
     };
     // ================= DOM & State =================
     const $ = s=>document.querySelector(s);
     const logDiv=$('#log'), chatDiv=$('#chat');
@@ -107,6 +168,8 @@
     const confirmBox=$('#confirm');
     const confirmYes=$('#confirm-yes');
     const confirmNo=$('#confirm-no');
     let pipe=null, cancelled=false, abortGen=null;
@@ -126,9 +189,23 @@
       catch(e){ log('Primary failed, fallback:',CDN_FALLBACK,e?.message); return await import(CDN_FALLBACK); }
     }
     // ================= Events =================
     loadBtn.addEventListener('click', ()=>{
-      // Show confirmation instead of starting download immediately
       loadBtn.style.display='none';
       confirmBox.style.display='block';
     });
@@ -171,18 +248,19 @@
         const botEl=addMsg('…');
         stopBtn.disabled=false; chip('', 'Generating…');
-        // Stream tokens with callback_function (API shape may vary slightly between versions)
         let outText='';
         abortGen = new AbortController();
-        const gen = await pipe(
-          `${sys?`[SYSTEM]
 ${sys}
-`:''}[USER]
 ${user}
 [ASSISTANT]
-`,
           {
             max_new_tokens: 256,
             temperature: 0.7,

     .ok{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.35)}
     .warn{background:rgba(243,156,18,.12);border-color:rgba(243,156,18,.35)}
     .err{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.35)}
+    .examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
+    .examples button{justify-content:flex-start}
+    .toggle{display:flex;align-items:center;gap:8px}
   </style>
 </head>
 <body>
     </div>
   </div>
+  <div class="card">
+    <h3 style="margin:6px 0">Examples</h3>
+    <div class="toggle"><input id="autorun" type="checkbox" checked/> <label for="autorun" class="muted">Auto‑run on click</label></div>
+    <div id="examples" class="examples"></div>
+  </div>
   <div class="card">
     <h3 style="margin:6px 0">Debug log</h3>
     <div id="log"></div>
   <script type="module">
     // ================= Configuration =================
     const MODEL_ID = 'onnx-community/Qwen2.5-Coder-3B-Instruct';
     const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
     const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
       progress_callback: setProgress,
     };
+    // Example presets (rendered as buttons)
+    const EXAMPLES = [
+      {
+        title: 'Parse Apache logs (Python)',
+        sys: 'You are a senior coding assistant. Keep answers concise and show tested code.',
+        prompt: 'Write a Python function parse_log(line: str) that parses Apache *combined* log format into a dict with keys ip, time, method, path, status, bytes, referrer, ua. Include robust regex, timezone handling, and 5 pytest unit tests.'
+      },
+      {
+        title: 'Refactor callbacks → async/await (JS)',
+        sys: 'You are a pragmatic JS refactoring assistant.',
+        prompt: 'Refactor this Node.js callback code to async/await with proper error handling and backpressure using streams: ```js
+const fs = require(\'fs\'); fs.readFile(\'in.txt\',(e,d)=>{ if(e) throw e; fs.writeFile(\'out.txt\', d.toString().toUpperCase(), err=>{ if(err) throw err; console.log(\'done\'); }); });
+``` Provide a short explanation.'
+      },
+      {
+        title: 'Cohort retention SQL (Postgres)',
+        sys: 'You are a data engineer.',
+        prompt: 'Given events(user_id, event_time, event_name) with sign_up and active events, write a SQL that computes weekly user retention (cohorted by signup week) as a pivoted table. Assume UTC timestamps. Explain indexes briefly.'
+      },
+      {
+        title: 'Unit tests with pytest',
+        sys: 'You are a Python testing expert.',
+        prompt: 'Generate pytest tests for a function normalize_phone(s: str) that returns E.164 format or raises ValueError. Cover edge cases and property tests with hypothesis.'
+      },
+      {
+        title: 'Explain code step by step',
+        sys: 'Be a clear explainer for junior developers.',
+        prompt: 'Explain the following code step by step, then suggest two improvements for readability and performance: ```python
+from collections import defaultdict
+def f(nums):
+ d=defaultdict(int)
+ for x in nums: d[x]+=1
+ m=max(d.values())
+ return [k for k,v in d.items() if v==m]
+```'
+      },
+      {
+        title: 'Regex with explanation',
+        sys: 'You write readable regex with comments.',
+        prompt: 'Write a single regex that matches a valid IPv4 or IPv6 address. Provide a commented, multi-line version and a short, single-line version, plus examples of matches and non-matches.'
+      },
+      {
+        title: 'Document a Go function',
+        sys: 'You are a Go reviewer.',
+        prompt: 'Write a Go doc comment and improve the signature for a function that merges two sorted slices of ints and returns a deduplicated sorted slice. Provide a fully working example.'
+      },
+      {
+        title: 'GitHub Actions CI',
+        sys: 'You are a DevOps assistant.',
+        prompt: 'Create a GitHub Actions workflow (YAML) that runs Python tests on 3.11, caches pip, runs flake8 + pytest, and uploads coverage to Codecov with secrets.CODECOV_TOKEN.'
+      }
+    ];
     // ================= DOM & State =================
     const $ = s=>document.querySelector(s);
     const logDiv=$('#log'), chatDiv=$('#chat');
     const confirmBox=$('#confirm');
     const confirmYes=$('#confirm-yes');
     const confirmNo=$('#confirm-no');
+    const exWrap=$('#examples');
+    const autoRun=$('#autorun');
     let pipe=null, cancelled=false, abortGen=null;
       catch(e){ log('Primary failed, fallback:',CDN_FALLBACK,e?.message); return await import(CDN_FALLBACK); }
     }
+    function renderExamples(){
+      exWrap.innerHTML='';
+      EXAMPLES.forEach((ex,i)=>{
+        const b=document.createElement('button');
+        b.textContent=ex.title; b.className='ghost';
+        b.addEventListener('click',()=>{
+          sysEl.value = ex.sys || '';
+          promptEl.value = ex.prompt || '';
+          if(autoRun.checked){ sendBtn.click(); }
+        });
+        exWrap.appendChild(b);
+      });
+    }
+    renderExamples();
     // ================= Events =================
     loadBtn.addEventListener('click', ()=>{
       loadBtn.style.display='none';
       confirmBox.style.display='block';
     });
         const botEl=addMsg('…');
         stopBtn.disabled=false; chip('', 'Generating…');
         let outText='';
         abortGen = new AbortController();
+        const sysPrefix = sys ? `[SYSTEM]
 ${sys}
+` : '';
+        const promptText = `${sysPrefix}[USER]
 ${user}
 [ASSISTANT]
+`;
+        const gen = await pipe(
+          promptText,
           {
             max_new_tokens: 256,
             temperature: 0.7,