| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Musubi</title> |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%A7%AC%3C/text%3E%3C/svg%3E" /> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> |
| <link rel="stylesheet" href="/static/style.css" /> |
| </head> |
| <body class="h-screen overflow-hidden"> |
| <div class="flex flex-col h-full"> |
| |
| <header class="flex items-center justify-between px-5 py-3 border-b border-slate-700/60"> |
| <div> |
| <h1 class="text-xl font-semibold text-violet-300 tracking-tight">Musubi <span class="text-slate-400 font-normal">(結び)</span></h1> |
| <p class="text-xs text-slate-500">Tying entities into hypotheses.</p> |
| </div> |
| <button id="btnPubmed" |
| class="px-3 py-1.5 rounded-md border border-violet-500/40 hover:border-violet-400 hover:bg-violet-500/10 text-sm text-violet-200 transition-colors"> |
| PubMed search |
| </button> |
| </header> |
|
|
| |
| <main class="flex flex-1 min-h-0"> |
| |
| <aside class="w-80 flex-shrink-0 border-r border-slate-700/60 flex flex-col p-4 gap-4 overflow-y-auto"> |
| <div> |
| <label class="block text-xs font-medium text-slate-400 mb-1">Abstracts (separate by blank line)</label> |
| <textarea id="txtInput" rows="10" |
| class="w-full p-2 rounded bg-slate-900/80 border border-slate-700 text-sm focus:outline-none focus:border-violet-500 resize-none" |
| placeholder="Paste PubMed abstracts here..."></textarea> |
| </div> |
|
|
| <button id="btnAnalyze" |
| class="w-full py-2 rounded bg-violet-600 hover:bg-violet-500 font-semibold text-white"> |
| Analyze |
| </button> |
|
|
| <hr class="border-slate-700/60" /> |
|
|
| <div> |
| <label class="flex justify-between text-xs font-medium text-slate-400 mb-1"> |
| <span>Min confidence</span> |
| <span id="lblConf">0.50</span> |
| </label> |
| <input id="sldConf" type="range" min="0" max="1" step="0.05" value="0.5" class="w-full accent-violet-500" /> |
| </div> |
|
|
| <div> |
| <label class="block text-xs font-medium text-slate-400 mb-1">Granularity</label> |
| <div class="flex gap-2"> |
| <label class="flex items-center gap-1 text-sm"> |
| <input type="radio" name="gran" value="sentence" class="accent-violet-500" /> Sentence |
| </label> |
| <label class="flex items-center gap-1 text-sm"> |
| <input type="radio" name="gran" value="abstract" checked class="accent-violet-500" /> Abstract |
| </label> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-xs font-medium text-slate-400 mb-2">Pair types</label> |
| <div id="pairFilters" class="grid grid-cols-2 gap-1 text-xs"></div> |
| </div> |
|
|
| <div id="statsBox" class="text-xs text-slate-400 mt-auto pt-2 border-t border-slate-700/60 hidden"> |
| <div>Abstracts: <span id="stAb">-</span></div> |
| <div>Sentences: <span id="stSent">-</span></div> |
| <div>Entities: <span id="stEnt">-</span></div> |
| <div>Elapsed: <span id="stEl">-</span>s</div> |
| </div> |
| </aside> |
|
|
| |
| <section class="flex flex-col flex-1 min-w-0"> |
| <div class="flex-1 relative"> |
| <div id="graph" class="absolute inset-0"></div> |
| <div id="placeholder" |
| class="absolute inset-0 flex items-center justify-center text-slate-500 text-sm pointer-events-none"> |
| Paste abstracts and click <span class="mx-1 px-2 py-0.5 rounded bg-slate-800 text-violet-300">Analyze</span> to see the graph. |
| </div> |
| </div> |
| <div id="evidencePanel" |
| class="border-t border-slate-700/60 bg-slate-900/60 max-h-72 overflow-y-auto p-3 text-sm hidden"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-semibold text-violet-300">Evidence</h3> |
| <button id="btnCloseEv" class="text-xs text-slate-400 hover:text-white">close ✕</button> |
| </div> |
| <div id="evidenceBody" class="space-y-2"></div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| |
| <div id="overlay" class="fixed inset-0 bg-slate-950/70 hidden flex items-center justify-center z-40"> |
| <div class="bg-slate-800 px-6 py-4 rounded shadow-lg flex items-center gap-3"> |
| <div class="w-5 h-5 border-2 border-violet-400 border-t-transparent rounded-full animate-spin"></div> |
| <span id="ovText">Analyzing...</span> |
| </div> |
| </div> |
|
|
| |
| <div id="modal" class="fixed inset-0 bg-slate-950/70 hidden flex items-center justify-center z-50"> |
| <div class="bg-slate-800 p-5 rounded-lg w-96 space-y-3 border border-slate-700"> |
| <h3 class="font-semibold text-violet-300">PubMed search</h3> |
| <input id="modalQuery" type="text" placeholder="e.g. SARS-CoV-2 ACE2 spike" |
| class="w-full px-2 py-1.5 rounded bg-slate-900 border border-slate-700 text-sm focus:outline-none focus:border-violet-500" /> |
| <div class="flex items-center gap-2 text-xs text-slate-400"> |
| <span>Max results</span> |
| <input id="modalMax" type="number" min="1" max="50" value="10" |
| class="w-20 px-2 py-1 rounded bg-slate-900 border border-slate-700 text-sm" /> |
| </div> |
| <p id="modalErr" class="text-xs text-red-400 hidden"></p> |
| <div class="flex justify-end gap-2 pt-2"> |
| <button id="modalCancel" class="px-3 py-1.5 text-sm text-slate-300 hover:text-white">Cancel</button> |
| <button id="modalFetch" class="px-3 py-1.5 rounded bg-violet-600 hover:bg-violet-500 text-white text-sm">Fetch</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
