| <!DOCTYPE html> |
| <html class="bg-gray-50"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width" /> |
| <title>GitHub Issue Generator 🎯</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="./style/style.css" /> |
|
|
| <link |
| rel="stylesheet" |
| href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" |
| /> |
| <link rel="stylesheet" href="./style/ace.css" /> |
| <link rel="stylesheet" href="./style/hljs.css" /> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| <div class="bg-white border-b border-gray-200"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <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">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> |
| <select id="model-selection" class="github-select"></select> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="border-b border-gray-200 pb-4 mb-4"> |
| <div class="flex items-center space-x-2"> |
| <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> |
| <span class="text-xl font-semibold">New Issue</span> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| <div class="space-y-4"> |
| <div class="bg-white rounded-md shadow-sm border border-gray-200 p-4"> |
| <textarea |
| id="prompt" |
| placeholder="Describe the issue..." |
| class="github-textarea" |
| rows="12" |
| ></textarea> |
| </div> |
| |
| <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"> |
| <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">JSON Schema</h3> |
| <div id="schema" class="border rounded-md bg-gray-50"></div> |
| </div> |
|
|
| <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">Generated Issue</h3> |
| <div id="output" class="border rounded-md bg-gray-50 p-3 text-sm"></div> |
| <p class="info hidden text-xs text-gray-500 mt-4" id="stats"></p> |
| </div> |
| </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> |
|
|
