live-two-way-chat/index.html

73 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-overview" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">Live Two-Way Chat</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pages.brrd.tech/rob/live-two-way-chat/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Live Two-Way Chat"><meta data-rh="true" name="description" content="Real-time conversational AI with natural speech flow - moving beyond forum-style turn-taking."><meta data-rh="true" property="og:description" content="Real-time conversational AI with natural speech flow - moving beyond forum-style turn-taking."><link data-rh="true" rel="icon" href="/rob/live-two-way-chat/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pages.brrd.tech/rob/live-two-way-chat/"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/live-two-way-chat/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/live-two-way-chat/" hreflang="x-default"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/rob/live-two-way-chat/</span> </p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),o=window.location.pathname,s="/"===o.substr(-1)?o:o+"/";e.innerHTML=s}document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()})</script><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Live Two-Way Chat","item":"https://pages.brrd.tech/rob/live-two-way-chat/"}]}</script><link rel="stylesheet" href="/rob/live-two-way-chat/assets/css/styles.6095798e.css">
<script src="/rob/live-two-way-chat/assets/js/runtime~main.ecb8b763.js" defer="defer"></script>
<script src="/rob/live-two-way-chat/assets/js/main.d77de903.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/rob/live-two-way-chat/"><b class="navbar__title text--truncate">Live Two-Way Chat</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://gitea.brrd.tech/rob/live-two-way-chat" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Source Code<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/rob/live-two-way-chat/"><span title="Live Two-Way Chat" class="linkLabel_WmDU">Live Two-Way Chat</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/live-two-way-chat/todos"><span title="Todos" class="linkLabel_WmDU">Todos</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/live-two-way-chat/goals"><span title="Goals" class="linkLabel_WmDU">Goals</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/live-two-way-chat/milestones"><span title="Milestones" class="linkLabel_WmDU">Milestones</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/rob/live-two-way-chat/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Live Two-Way Chat</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Live Two-Way Chat</h1></header>
<p>Real-time conversational AI with natural speech flow - moving beyond forum-style turn-taking.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="vision">Vision<a href="#vision" class="hash-link" aria-label="Direct link to Vision" title="Direct link to Vision" translate="no"></a></h2>
<p>Current chatbot conversations are essentially forums with near-instant replies. Humans don&#x27;t listen to someone speak, stop, think about the context, then respond with an entire paragraph. <strong>Live Two-Way Chat</strong> simulates natural human conversation:</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-problem">The Problem<a href="#the-problem" class="hash-link" aria-label="Direct link to The Problem" title="Direct link to The Problem" translate="no"></a></h3>
<p>Traditional chat interfaces:</p>
<ul>
<li class="">Wait for complete user input before processing</li>
<li class="">Generate entire responses at once</li>
<li class="">Can&#x27;t be interrupted or course-corrected mid-thought</li>
<li class="">Feel robotic and turn-based</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-solution">The Solution<a href="#the-solution" class="hash-link" aria-label="Direct link to The Solution" title="Direct link to The Solution" translate="no"></a></h3>
<p>A real-time bidirectional conversation where:</p>
<ol>
<li class=""><strong>Continuous transcription</strong> - Human voice is transcribed in small constant chunks in the background</li>
<li class=""><strong>Predictive response preparation</strong> - AI analyzes context and pre-prepares replies, modifying them as new context arrives</li>
<li class=""><strong>Natural interruption</strong> - AI decides when to speak:<!-- -->
<ul>
<li class="">Sometimes interrupting if an important point needs to be made</li>
<li class="">Sometimes waiting for a question to be asked</li>
</ul>
</li>
<li class=""><strong>Bidirectional listening</strong> - The chatbot listens even while speaking, taking into account what it was saying when interrupted</li>
<li class=""><strong>Shared context window</strong> - A visual workspace for files and artifacts</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="shared-context-window">Shared Context Window<a href="#shared-context-window" class="hash-link" aria-label="Direct link to Shared Context Window" title="Direct link to Shared Context Window" translate="no"></a></h2>
<p>A drag-and-drop workspace visible to both human and AI:</p>
<table><thead><tr><th>Content Type</th><th>Behavior</th></tr></thead><tbody><tr><td><strong>Images</strong></td><td>Displayed for user, visible to AI for analysis</td></tr><tr><td><strong>Code</strong></td><td>Displayed and editable by user, AI can view and modify</td></tr><tr><td><strong>Documents</strong></td><td>Shared context for conversation</td></tr><tr><td><strong>Split view</strong></td><td>Window can split to show 2+ files simultaneously</td></tr></tbody></table>
<p>The AI can:</p>
<ul>
<li class="">View what&#x27;s in the window</li>
<li class="">Edit code or text files</li>
<li class="">Reference images in conversation</li>
<li class="">Suggest changes visually</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="technical-challenges">Technical Challenges<a href="#technical-challenges" class="hash-link" aria-label="Direct link to Technical Challenges" title="Direct link to Technical Challenges" translate="no"></a></h2>
<ol>
<li class=""><strong>Streaming ASR</strong> - Real-time speech-to-text with low latency</li>
<li class=""><strong>Incremental response generation</strong> - Partial responses that can be updated</li>
<li class=""><strong>Turn-taking model</strong> - When to speak, when to wait, when to interrupt</li>
<li class=""><strong>Context threading</strong> - Tracking what was said/being-said when interruptions occur</li>
<li class=""><strong>Audio ducking</strong> - Managing simultaneous speech gracefully</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="potential-architecture">Potential Architecture<a href="#potential-architecture" class="hash-link" aria-label="Direct link to Potential Architecture" title="Direct link to Potential Architecture" translate="no"></a></h2>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────┐ ┌──────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Microphone │────▶│ Streaming ASR │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ (continuous) │ │ (Whisper/etc) │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────┘ └────────┬─────────┘</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> │ text chunks</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────┐ ┌──────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Speaker │◀────│ Response Engine │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ (TTS) │ │ (predictive) │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────┘ └────────┬─────────┘</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> ┌────────▼─────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> │ Context Window │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> │ (shared state) │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> └──────────────────┘</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="inspiration">Inspiration<a href="#inspiration" class="hash-link" aria-label="Direct link to Inspiration" title="Direct link to Inspiration" translate="no"></a></h2>
<ul>
<li class="">Natural human conversations (overlapping speech, interruptions, backchanneling)</li>
<li class="">Real-time collaborative editors (Google Docs)</li>
<li class="">Voice assistants that feel less robotic</li>
<li class="">Pair programming conversations</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-projects">Related Projects<a href="#related-projects" class="hash-link" aria-label="Direct link to Related Projects" title="Direct link to Related Projects" translate="no"></a></h2>
<ul>
<li class=""><a class="" href="/rob/ramble/overview">Ramble</a> - Voice transcription (could provide ASR component)</li>
<li class=""><a class="" href="/rob/artifact-editor/overview">Artifact Editor</a> - Could power the shared context window</li>
</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/rob/live-two-way-chat/todos"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Todos</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#vision" class="table-of-contents__link toc-highlight">Vision</a><ul><li><a href="#the-problem" class="table-of-contents__link toc-highlight">The Problem</a></li><li><a href="#the-solution" class="table-of-contents__link toc-highlight">The Solution</a></li></ul></li><li><a href="#shared-context-window" class="table-of-contents__link toc-highlight">Shared Context Window</a></li><li><a href="#technical-challenges" class="table-of-contents__link toc-highlight">Technical Challenges</a></li><li><a href="#potential-architecture" class="table-of-contents__link toc-highlight">Potential Architecture</a></li><li><a href="#inspiration" class="table-of-contents__link toc-highlight">Inspiration</a></li><li><a href="#related-projects" class="table-of-contents__link toc-highlight">Related Projects</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/rob/live-two-way-chat/">Overview</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://gitea.brrd.tech/rob/live-two-way-chat" target="_blank" rel="noopener noreferrer" class="footer__link-item">Gitea<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Live Two-Way Chat Documentation</div></div></div></footer></div>
</body>
</html>