Spaces:

Uddiii
/

Multi-Agentic

Running

App Files Files Community

Uddiii commited on 27 days ago

Commit

2c8be6b

verified ·

1 Parent(s): e91c699

Update ER_MAP/dashboard.py

Browse files

Added the dashboard we had in demo video to hf space UI for judges to interact previously it had a static html page

Files changed (1) hide show

ER_MAP/dashboard.py +85 -0

ER_MAP/dashboard.py CHANGED Viewed

@@ -1070,6 +1070,8 @@ HTML_PAGE = r"""<!DOCTYPE html>
       const [outcome, setOutcome]             = useState(null);
       const [persona, setPersona]             = useState(null);
       const [modelSource, setModelSource]     = useState(null);
       // refs (audio + loop control — never trigger re-render)
       const audioQueueRef    = useRef([]);
@@ -1077,6 +1079,11 @@ HTML_PAGE = r"""<!DOCTYPE html>
       const renderedCountRef = useRef(0);
       const stopRef          = useRef(false);
       // ---------------- Audio queue (drives card activation) ----------------
       const processQueue = useCallback(async () => {
         if (isPlayingRef.current || audioQueueRef.current.length === 0) return;
@@ -1089,6 +1096,21 @@ HTML_PAGE = r"""<!DOCTYPE html>
             body: JSON.stringify({ text: item.text, agent: item.agent }),
           });
           if (!res.ok) {
             isPlayingRef.current = false;
             processQueue();
             return;
@@ -1096,6 +1118,7 @@ HTML_PAGE = r"""<!DOCTYPE html>
           const blob = await res.blob();
           const url  = URL.createObjectURL(blob);
           const audio = new Audio(url);
           let finished = false;
           const finish = () => {
@@ -1117,6 +1140,21 @@ HTML_PAGE = r"""<!DOCTYPE html>
             playPromise.catch(() => { clearTimeout(watchdog); finish(); });
           }
         } catch (e) {
           isPlayingRef.current = false;
           processQueue();
         }
@@ -1149,6 +1187,7 @@ HTML_PAGE = r"""<!DOCTYPE html>
         setTotalReward(0);
         setPhasesDone([]);
         setCurrentPhase(null);
         setStepCount(0);
         renderedCountRef.current = 0;
         audioQueueRef.current    = [];
@@ -1213,6 +1252,10 @@ HTML_PAGE = r"""<!DOCTYPE html>
           if (stepData.phases_done)        setPhasesDone(stepData.phases_done);
           if (stepData.current_phase !== undefined) setCurrentPhase(stepData.current_phase);
           if (stepData.done) {
             await waitForAudioDrained();
             break;
@@ -1368,6 +1411,48 @@ HTML_PAGE = r"""<!DOCTYPE html>
                     </div>
                   </div>
                 )}
               </div>
             </div>

       const [outcome, setOutcome]             = useState(null);
       const [persona, setPersona]             = useState(null);
       const [modelSource, setModelSource]     = useState(null);
+      const [conversationLog, setConversationLog] = useState([]);
+      const logEndRef = useRef(null);
       // refs (audio + loop control — never trigger re-render)
       const audioQueueRef    = useRef([]);
       const renderedCountRef = useRef(0);
       const stopRef          = useRef(false);
+      // Auto-scroll conversation log
+      useEffect(() => {
+        if (logEndRef.current) logEndRef.current.scrollIntoView({ behavior: 'smooth' });
+      }, [conversationLog]);
       // ---------------- Audio queue (drives card activation) ----------------
       const processQueue = useCallback(async () => {
         if (isPlayingRef.current || audioQueueRef.current.length === 0) return;
             body: JSON.stringify({ text: item.text, agent: item.agent }),
           });
           if (!res.ok) {
+            // ElevenLabs unavailable — use browser speech
+            try {
+              const synth = window.speechSynthesis;
+              if (synth) {
+                const utter = new SpeechSynthesisUtterance(item.text);
+                utter.rate = 1.05;
+                utter.pitch = item.agent === 'patient' ? 0.9 : item.agent === 'nurse' ? 1.1 : 1.0;
+                utter.volume = 1.0;
+                setActiveAgent(item.agent);
+                utter.onend = () => { setActiveAgent(null); isPlayingRef.current = false; processQueue(); };
+                utter.onerror = () => { setActiveAgent(null); isPlayingRef.current = false; processQueue(); };
+                synth.speak(utter);
+                return;
+              }
+            } catch (_) {}
             isPlayingRef.current = false;
             processQueue();
             return;
           const blob = await res.blob();
           const url  = URL.createObjectURL(blob);
           const audio = new Audio(url);
+          audio.volume = 1.0;
           let finished = false;
           const finish = () => {
             playPromise.catch(() => { clearTimeout(watchdog); finish(); });
           }
         } catch (e) {
+          // ElevenLabs TTS failed — use browser Web Speech API as fallback
+          try {
+            const synth = window.speechSynthesis;
+            if (synth) {
+              const utter = new SpeechSynthesisUtterance(item.text);
+              utter.rate = 1.05;
+              utter.pitch = item.agent === 'patient' ? 0.9 : item.agent === 'nurse' ? 1.1 : 1.0;
+              utter.volume = 1.0;
+              setActiveAgent(item.agent);
+              utter.onend = () => { setActiveAgent(null); isPlayingRef.current = false; processQueue(); };
+              utter.onerror = () => { setActiveAgent(null); isPlayingRef.current = false; processQueue(); };
+              synth.speak(utter);
+              return;
+            }
+          } catch (_) {}
           isPlayingRef.current = false;
           processQueue();
         }
         setTotalReward(0);
         setPhasesDone([]);
         setCurrentPhase(null);
+        setConversationLog([]);
         setStepCount(0);
         renderedCountRef.current = 0;
         audioQueueRef.current    = [];
           if (stepData.phases_done)        setPhasesDone(stepData.phases_done);
           if (stepData.current_phase !== undefined) setCurrentPhase(stepData.current_phase);
+          // Update conversation log
+          const allMsgs = stepData.conversation || [];
+          setConversationLog(allMsgs);
           if (stepData.done) {
             await waitForAudioDrained();
             break;
                     </div>
                   </div>
                 )}
+                {/* Section D: Live Conversation Log */}
+                <div className="border-t border-slate-800/50 pt-6 pb-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="text-xs font-semibold text-slate-300 uppercase tracking-wider">Agent Conversation</h3>
+                    <span className="text-[10px] text-slate-500 font-mono">{conversationLog.length} msgs</span>
+                  </div>
+                  <div className="bg-slate-950/40 rounded-xl border border-slate-800/50 p-3 max-h-[280px] overflow-y-auto custom-scrollbar shadow-inner space-y-2">
+                    {conversationLog.length === 0 && (
+                      <div className="text-slate-600 italic text-[11px] text-center py-4">Start a case to see the conversation...</div>
+                    )}
+                    {conversationLog.map((m, i) => {
+                      const colors = {
+                        doctor: { bg: 'bg-indigo-500/10', border: 'border-indigo-500/20', name: 'text-indigo-400', icon: '🩺' },
+                        nurse: { bg: 'bg-blue-500/10', border: 'border-blue-500/20', name: 'text-blue-400', icon: '👩‍⚕️' },
+                        patient: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', name: 'text-amber-400', icon: '🏥' },
+                        system: { bg: 'bg-slate-800/30', border: 'border-slate-700/30', name: 'text-slate-400', icon: '⚙️' },
+                      };
+                      const c = colors[m.agent] || colors.system;
+                      return (
+                        <div key={i} className={`${c.bg} border ${c.border} rounded-lg p-2`}>
+                          <div className="flex items-center gap-1.5 mb-1">
+                            <span className="text-[10px]">{c.icon}</span>
+                            <span className={`text-[10px] font-bold uppercase tracking-wider ${c.name}`}>{m.agent}</span>
+                            {m.type && m.type !== 'speak_to' && (
+                              <span className="text-[8px] bg-slate-800/50 text-slate-500 px-1.5 py-0.5 rounded-full font-mono">{m.type}</span>
+                            )}
+                            {m.target && m.target !== m.agent && (
+                              <span className="text-[8px] text-slate-600">→ {m.target}</span>
+                            )}
+                          </div>
+                          {m.thought && (
+                            <div className="text-[9px] text-slate-500 italic mb-1 pl-4 border-l border-slate-700/30">💭 {m.thought}</div>
+                          )}
+                          <div className="text-[10px] text-slate-300 leading-relaxed pl-4">{m.message || '(no message)'}</div>
+                        </div>
+                      );
+                    })}
+                    <div ref={logEndRef} />
+                  </div>
+                </div>
               </div>
             </div>