up

index.html

@@ -22,7 +22,7 @@
             <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" class="octicon octicon-mark-github">
               <path fill="#24292f" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
             </svg>
-            <span class="ml-4 text-gray-900 font-semibold">Issue Generator</span>
+            <span class="ml-4 text-gray-900 font-semibold">Github Issue Generator running locally w/ SmolLM2 & WebGPU</span>
           </div>
           <div class="flex items-center space-x-2">
             <label for="model-selection" class="text-sm text-gray-600">Model:</label>
@@ -56,6 +56,39 @@
           <button id="generate" class="github-button">
             Generate Structured Issue
           </button>
+
+          <div class="bg-white rounded-md shadow-sm border border-gray-200 p-4">
+            <h3 class="text-sm font-medium text-gray-900 mb-2">Issue Preview</h3>
+            <div id="issue-preview" class="hidden">
+              <div class="issue-title-row flex items-center gap-2 mb-4">
+                <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+                  <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
+                </svg>
+                <h1 id="preview-title" class="text-xl font-semibold"></h1>
+              </div>
+              
+              <div class="issue-metadata flex flex-wrap gap-2 mb-4">
+                <span id="preview-priority" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"></span>
+                <span id="preview-time" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                  <svg class="mr-1.5 h-3 w-3" viewBox="0 0 16 16" fill="currentColor">
+                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-3.89 3.89-1.78-1.78a.75.75 0 0 0-1.06 1.06l2.3 2.3a.75.75 0 0 0 1.06 0l4.4-4.4a.75.75 0 0 0-1.06-1.06Z"></path>
+                  </svg>
+                  <span id="preview-time-text"></span>
+                </span>
+              </div>
+
+              <div id="preview-labels" class="flex flex-wrap gap-2 mb-4"></div>
+
+              <div class="issue-description prose max-w-none mb-4">
+                <div id="preview-description" class="text-gray-700 whitespace-pre-wrap"></div>
+              </div>
+
+              <div class="issue-assignees flex items-center gap-2 pt-4 border-t">
+                <span class="text-sm text-gray-600">Assignees:</span>
+                <div id="preview-assignees" class="flex -space-x-2"></div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="space-y-4">
@@ -72,6 +105,14 @@
         </div>
       </div>
     </div>
+    <footer class="mt-8 py-6 border-t border-gray-200">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center text-sm text-gray-600">
+        Made with <span class="mx-1 text-red-500">♥</span> using 
+        <a href="https://webllm.mlc.ai/" class="mx-1 text-blue-600 hover:text-blue-800 hover:underline" target="_blank" rel="noopener">MLC Web LLM</a>
+        &
+        <a href="https://github.com/huggingface/smollm" class="mx-1 text-blue-600 hover:text-blue-800 hover:underline" target="_blank" rel="noopener">SmolLM2</a>
+      </div>
+    </footer>
     <script src="./dist/index.js" type="module"></script>
   </body>
 </html>

src/index.js

@@ -45,7 +45,7 @@ document.addEventListener("DOMContentLoaded", () => {
     theme: "ace/theme/github",
     wrap: true,
   });
-  
+
   // Set default schema
   jsonSchemaEditor.setValue(`{
     "title": "GitHubIssue",
@@ -148,6 +148,13 @@ Please include appropriate labels, priority level, and time estimation.`;
         language: "json",
       }).value;
 
+      try {
+        const issueData = JSON.parse(finalMessage);
+        updateIssuePreview(issueData);
+      } catch (error) {
+        console.error('Failed to parse issue data:', error);
+      }
+
       if (usage) {
         const statsTextParts = [];
         if (usage.extra.prefill_tokens_per_s) {
@@ -165,3 +172,51 @@ Please include appropriate labels, priority level, and time estimation.`;
     }
   };
 });
+
+function updateIssuePreview(issueData) {
+  const preview = document.getElementById('issue-preview');
+  
+  // Update title
+  document.getElementById('preview-title').textContent = issueData.title;
+  
+  // Update priority badge
+  const priorityBadge = document.getElementById('preview-priority');
+  priorityBadge.textContent = issueData.priority.toUpperCase();
+  priorityBadge.className = `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-${issueData.priority}`;
+  
+  // Update estimated time
+  document.getElementById('preview-time-text').textContent = issueData.estimated_time;
+  
+  // Update labels
+  const labelsContainer = document.getElementById('preview-labels');
+  labelsContainer.innerHTML = '';
+  issueData.labels.forEach(label => {
+    const labelEl = document.createElement('span');
+    labelEl.className = `issue-label label-${label}`;
+    labelEl.textContent = label;
+    labelsContainer.appendChild(labelEl);
+  });
+  
+  // Update description
+  document.getElementById('preview-description').textContent = issueData.description;
+  
+  // Update assignees
+  const assigneesContainer = document.getElementById('preview-assignees');
+  assigneesContainer.innerHTML = '';
+  if (issueData.assignees && issueData.assignees.length > 0) {
+    issueData.assignees.forEach(assignee => {
+      const avatarEl = document.createElement('div');
+      avatarEl.className = 'assignee-avatar';
+      avatarEl.textContent = assignee.charAt(0).toUpperCase();
+      assigneesContainer.appendChild(avatarEl);
+    });
+  } else {
+    assigneesContainer.innerHTML = '<span class="text-sm text-gray-500">No assignees</span>';
+  }
+  
+  // Show the preview with animation
+  preview.classList.remove('hidden');
+  // Force a reflow
+  preview.offsetHeight;
+  preview.classList.add('visible');
+}

style/style.css

@@ -200,4 +200,93 @@ body {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+}
+
+/* Priority badges */
+.priority-critical {
+  background-color: #cf222e;
+  color: white;
+}
+
+.priority-high {
+  background-color: #bc4c00;
+  color: white;
+}
+
+.priority-medium {
+  background-color: #bf8700;
+  color: white;
+}
+
+.priority-low {
+  background-color: #1a7f37;
+  color: white;
+}
+
+/* Label styles */
+.issue-label {
+  padding: 2px 8px;
+  border-radius: 2em;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.label-bug {
+  background-color: #ffebe9;
+  color: #cf222e;
+}
+
+.label-enhancement {
+  background-color: #ddf4ff;
+  color: #0969da;
+}
+
+.label-documentation {
+  background-color: #fff8c5;
+  color: #9a6700;
+}
+
+.label-security {
+  background-color: #ffeff7;
+  color: #bf3989;
+}
+
+.label-high-priority {
+  background-color: #fff1e5;
+  color: #bc4c00;
+}
+
+/* Assignee avatars */
+.assignee-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f6f8fa;
+  border: 2px solid white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #57606a;
+  font-weight: 500;
+}
+
+/* Issue description styling */
+.issue-description {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+}
+
+/* Transition for the preview */
+#issue-preview {
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+#issue-preview.visible {
+  opacity: 1;
+  transform: translateY(0);
 }