|
<!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> |
|
|
