File size: 6,442 Bytes
e359f8f 41aa58e e359f8f 41aa58e e359f8f 41aa58e e359f8f d0c23a5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!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>
|