Create index.html
Browse files- index.html +69 -0
index.html
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<title>Video Fit Flow (HF Space)</title>
|
| 6 |
+
<script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
|
| 7 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.5/js/jsplumb.min.js"></script>
|
| 8 |
+
<style>
|
| 9 |
+
html,body{margin:0;padding:1rem;font-family:sans-serif;height:100%;}
|
| 10 |
+
#wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
|
| 11 |
+
#chartContainer{flex:1;position:relative;background:#f5f5f5;overflow:auto;}
|
| 12 |
+
.node{position:absolute;width:240px;padding:1rem;border:2px solid #888;border-radius:6px;background:#fff;text-align:center;transition:background .3s,border-color .3s;}
|
| 13 |
+
.completed{border-color:#28a745;background:#e6ffed;}
|
| 14 |
+
.title-label{background:#e0f7fa;padding:.2rem .5rem;border-radius:4px;margin-top:.5rem;}
|
| 15 |
+
.score-box{margin-top:.5rem;font-size:1.2rem;}
|
| 16 |
+
#descContainer{flex:none;border-top:2px solid #888;background:#fff;padding:1rem;max-height:200px;overflow-y:auto;}
|
| 17 |
+
.controls input,.controls select,.controls button{width:90%;margin:6px auto;display:block;}
|
| 18 |
+
</style>
|
| 19 |
+
</head>
|
| 20 |
+
<body>
|
| 21 |
+
<div id="wrapper">
|
| 22 |
+
<div id="chartContainer"></div>
|
| 23 |
+
<div id="descContainer">
|
| 24 |
+
<strong>Description:</strong>
|
| 25 |
+
<div id="videoDesc"></div>
|
| 26 |
+
</div>
|
| 27 |
+
</div>
|
| 28 |
+
|
| 29 |
+
<script>
|
| 30 |
+
const nodes=[{id:'url',label:'Enter URL & Goal',controls:true},{id:'meta',label:'YouTube API',showTitle:true}];
|
| 31 |
+
const models=["all-MiniLM-L6-v2","multi-qa-MiniLM-L6-cos-v1","paraphrase-MiniLM-L3-v2","all-mpnet-base-v2","distilbert-base-nli-mean-tokens"];
|
| 32 |
+
models.forEach(m=>{nodes.push({id:`mod-${m}`,label:m});nodes.push({id:`scr-${m}`,label:'Score',hasScore:true});});
|
| 33 |
+
const edges=[{v:'url',w:'meta'},...models.flatMap(m=>[{v:'meta',w:`mod-${m}`},{v:`mod-${m}`,w:`scr-${m}`}] )];
|
| 34 |
+
|
| 35 |
+
const g=new dagre.graphlib.Graph();
|
| 36 |
+
g.setGraph({rankdir:'TB',marginx:20,marginy:20});
|
| 37 |
+
g.setDefaultEdgeLabel(()=>({}));
|
| 38 |
+
nodes.forEach(n=>{const h=n.controls?160:(n.showTitle?100:50);g.setNode(n.id,{label:n.label,width:240,height:h});});
|
| 39 |
+
edges.forEach(e=>g.setEdge(e.v,e.w));
|
| 40 |
+
dagre.layout(g);
|
| 41 |
+
|
| 42 |
+
const chart=document.getElementById('chartContainer');
|
| 43 |
+
nodes.forEach(n=>{const {x,y,width,height}=g.node(n.id);const d=document.createElement('div');d.id=`node-${n.id}`;d.className='node';d.style.left=`${x-width/2}px`;d.style.top=`${y-height/2}px`;
|
| 44 |
+
if(n.controls){d.innerHTML=`<strong>${n.label}</strong><div class="controls"><input id="urlInput" placeholder="YouTube URL"/><input id="goalInput" placeholder="Your Goal"/><select id="methodSelect"><option value="raw">Raw</option></select><button id="btnFetch">Fetch & Score</button></div>`;}
|
| 45 |
+
else if(n.showTitle){d.innerHTML=`<strong>YouTube API</strong><br/><div class="title-label">Title:</div><div id="videoTitle"></div>`;}
|
| 46 |
+
else {d.innerHTML=`<strong>${n.label}</strong>`+(n.hasScore?`<div id="score-${n.id}" class="score-box">–</div>`:'');}
|
| 47 |
+
chart.appendChild(d);
|
| 48 |
+
});
|
| 49 |
+
|
| 50 |
+
jsPlumb.ready(()=>{
|
| 51 |
+
const inst=jsPlumb.getInstance({Connector:['Flowchart',{cornerRadius:5}],Anchors:['Bottom','Top'],Endpoint:'Dot',PaintStyle:{stroke:'#888',strokeWidth:2},EndpointStyle:{fill:'#888',radius:3}});
|
| 52 |
+
edges.forEach(e=>inst.connect({source:`node-${e.v}`,target:`node-${e.w}`}));
|
| 53 |
+
new ResizeObserver(()=>inst.repaintEverything()).observe(document.getElementById('chartContainer'));
|
| 54 |
+
});
|
| 55 |
+
|
| 56 |
+
document.getElementById('chartContainer').addEventListener('click',async e=>{
|
| 57 |
+
if(e.target.id!=='btnFetch')return;
|
| 58 |
+
document.getElementById('node-url').classList.add('completed');
|
| 59 |
+
const url=document.getElementById('urlInput').value,goal=document.getElementById('goalInput').value;
|
| 60 |
+
const res=await fetch('/api/score',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url,goal,method:'raw'})});
|
| 61 |
+
const data=await res.json();
|
| 62 |
+
document.getElementById('videoTitle').textContent=data.title;
|
| 63 |
+
document.getElementById('node-meta').classList.add('completed');
|
| 64 |
+
document.getElementById('videoDesc').textContent=data.description;
|
| 65 |
+
models.forEach(m=>{const sc=data.scores[m];const sd=document.getElementById(`score-scr-${m}`);sd.textContent=sc;const nd=document.getElementById(`node-scr-${m}`);nd.style.background=sc<70?'#ff6347':'#90ee90';nd.classList.add('completed');});
|
| 66 |
+
});
|
| 67 |
+
</script>
|
| 68 |
+
</body>
|
| 69 |
+
</html>
|