File size: 4,402 Bytes
75c97bf |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Fit Flow (HF Space)</title>
<script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.5/js/jsplumb.min.js"></script>
<style>
html,body{margin:0;padding:1rem;font-family:sans-serif;height:100%;}
#wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
#chartContainer{flex:1;position:relative;background:#f5f5f5;overflow:auto;}
.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;}
.completed{border-color:#28a745;background:#e6ffed;}
.title-label{background:#e0f7fa;padding:.2rem .5rem;border-radius:4px;margin-top:.5rem;}
.score-box{margin-top:.5rem;font-size:1.2rem;}
#descContainer{flex:none;border-top:2px solid #888;background:#fff;padding:1rem;max-height:200px;overflow-y:auto;}
.controls input,.controls select,.controls button{width:90%;margin:6px auto;display:block;}
</style>
</head>
<body>
<div id="wrapper">
<div id="chartContainer"></div>
<div id="descContainer">
<strong>Description:</strong>
<div id="videoDesc"></div>
</div>
</div>
<script>
const nodes=[{id:'url',label:'Enter URL & Goal',controls:true},{id:'meta',label:'YouTube API',showTitle:true}];
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"];
models.forEach(m=>{nodes.push({id:`mod-${m}`,label:m});nodes.push({id:`scr-${m}`,label:'Score',hasScore:true});});
const edges=[{v:'url',w:'meta'},...models.flatMap(m=>[{v:'meta',w:`mod-${m}`},{v:`mod-${m}`,w:`scr-${m}`}] )];
const g=new dagre.graphlib.Graph();
g.setGraph({rankdir:'TB',marginx:20,marginy:20});
g.setDefaultEdgeLabel(()=>({}));
nodes.forEach(n=>{const h=n.controls?160:(n.showTitle?100:50);g.setNode(n.id,{label:n.label,width:240,height:h});});
edges.forEach(e=>g.setEdge(e.v,e.w));
dagre.layout(g);
const chart=document.getElementById('chartContainer');
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`;
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>`;}
else if(n.showTitle){d.innerHTML=`<strong>YouTube API</strong><br/><div class="title-label">Title:</div><div id="videoTitle"></div>`;}
else {d.innerHTML=`<strong>${n.label}</strong>`+(n.hasScore?`<div id="score-${n.id}" class="score-box">–</div>`:'');}
chart.appendChild(d);
});
jsPlumb.ready(()=>{
const inst=jsPlumb.getInstance({Connector:['Flowchart',{cornerRadius:5}],Anchors:['Bottom','Top'],Endpoint:'Dot',PaintStyle:{stroke:'#888',strokeWidth:2},EndpointStyle:{fill:'#888',radius:3}});
edges.forEach(e=>inst.connect({source:`node-${e.v}`,target:`node-${e.w}`}));
new ResizeObserver(()=>inst.repaintEverything()).observe(document.getElementById('chartContainer'));
});
document.getElementById('chartContainer').addEventListener('click',async e=>{
if(e.target.id!=='btnFetch')return;
document.getElementById('node-url').classList.add('completed');
const url=document.getElementById('urlInput').value,goal=document.getElementById('goalInput').value;
const res=await fetch('/api/score',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url,goal,method:'raw'})});
const data=await res.json();
document.getElementById('videoTitle').textContent=data.title;
document.getElementById('node-meta').classList.add('completed');
document.getElementById('videoDesc').textContent=data.description;
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');});
});
</script>
</body>
</html>
|