app.py

import base64
from pathlib import Path

import gradio as gr


CSS = """

:root {

  color-scheme: dark;

}



.gradio-container {

  min-height: 100vh;

  background:

    radial-gradient(circle at 18% 8%, rgba(0, 122, 204, 0.20), transparent 28rem),

    radial-gradient(circle at 90% 16%, rgba(80, 180, 150, 0.12), transparent 24rem),

    linear-gradient(145deg, #0b0f14 0%, #121821 48%, #070a0f 100%) !important;

  color: #eef3f8;

  font-family: Inter, Segoe UI, Arial, sans-serif;

}



.main {

  max-width: 1120px;

  margin: 0 auto;

  padding: 36px 20px 44px;

}



.hero {

  display: grid;

  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);

  gap: 28px;

  align-items: center;

  padding: 24px 0 34px;

}



.eyebrow {

  margin: 0 0 12px;

  color: #7bb9e8;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.hero h1 {

  margin: 0;

  color: #ffffff;

  font-size: clamp(2.5rem, 7vw, 5.4rem);

  line-height: 0.94;

  letter-spacing: 0;

}



.lead {

  max-width: 680px;

  margin: 22px 0 0;

  color: #b8c6d5;

  font-size: 1.08rem;

  line-height: 1.65;

}



.hero-card,

.panel {

  border: 1px solid rgba(180, 198, 213, 0.16);

  border-radius: 8px;

  background: rgba(13, 19, 28, 0.74);

  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);

}



.hero-card {

  display: grid;

  gap: 16px;

  padding: 22px;

}



.app-mark {

  width: 90px;

  height: 90px;

  border-radius: 22px;

  background: #0f1620;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);

}



.hero-card h2,

.panel h2 {

  margin: 0;

  color: #ffffff;

  font-size: 1.15rem;

}



.hero-card p,

.panel p {

  margin: 0;

  color: #b8c6d5;

  line-height: 1.55;

}



.chips {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 4px;

}



.chip {

  border: 1px solid rgba(123, 185, 232, 0.28);

  border-radius: 999px;

  padding: 6px 10px;

  color: #d9ecfb;

  background: rgba(0, 122, 204, 0.14);

  font-size: 0.86rem;

}



.grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-top: 18px;

}



.panel {

  padding: 18px;

}



.section-title {

  margin: 36px 0 12px;

  color: #ffffff;

  font-size: 1.35rem;

}



.flow {

  display: grid;

  gap: 8px;

  padding: 18px;

  border: 1px solid rgba(180, 198, 213, 0.14);

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.045);

  color: #d5e2ec;

  font-family: Consolas, Monaco, monospace;

  font-size: 0.92rem;

}



.flow span {

  display: block;

}



.footer-note {

  margin-top: 28px;

  color: #8393a2;

  font-size: 0.92rem;

}



@media (max-width: 820px) {

  .hero,

  .grid {

    grid-template-columns: 1fr;

  }

}

"""


def _image_data_uri(path: str) -> str:
    image_path = Path(path)
    if not image_path.exists():
        return ""
    encoded = base64.b64encode(image_path.read_bytes()).decode("ascii")
    return f"data:image/png;base64,{encoded}"


ICON_URI = _image_data_uri("src/Reachy_OpenWebUI/static/assets/reachy-conversation-app.png")


HTML = f"""

<main class="main">

  <section class="hero">

    <div>

      <p class="eyebrow">Reachy Mini + OpenWebUI</p>

      <h1>Reachy OpenWebUI</h1>

      <p class="lead">

        A phone-style conversation app for Reachy Mini. OpenWebUI handles the model,

        transcription, user context, and TTS; the Reachy app handles the robot runtime,

        settings UI, local tools, avatars, chat state, and movement.

      </p>

    </div>

    <aside class="hero-card">

      <img class="app-mark" src="{ICON_URI}" alt="">

      <h2>Project Page</h2>

      <p>

        This Space is a lightweight overview. The real app runs in the Reachy Mini

        app environment where it can access robot audio, camera, speaker, and motion.

      </p>

      <div class="chips">

        <span class="chip">Phone UI</span>

        <span class="chip">OpenWebUI TTS</span>

        <span class="chip">Robot tools</span>

        <span class="chip">Attitudes</span>

      </div>

    </aside>

  </section>



  <h2 class="section-title">What It Does</h2>

  <section class="grid">

    <div class="panel">

      <h2>Contacts</h2>

      <p>OpenWebUI models and workspaces appear as phone contacts with cached avatars.</p>

    </div>

    <div class="panel">

      <h2>Conversations</h2>

      <p>Saved OpenWebUI chat ids can be selected from a phone-style conversation list.</p>

    </div>

    <div class="panel">

      <h2>Motion</h2>

      <p>Speech-reactive head movement blends with Reachy-side dances and recorded emotions.</p>

    </div>

  </section>



  <h2 class="section-title">Runtime Flow</h2>

  <div class="flow" aria-label="Runtime flow">

    <span>Reachy microphone</span>

    <span>-> VAD and OpenWebUI transcription</span>

    <span>-> OpenWebUI chat completion with Reachy tool specs</span>

    <span>-> optional local Reachy tool execution</span>

    <span>-> OpenWebUI speech</span>

    <span>-> Reachy speaker output plus motion</span>

  </div>



  <p class="footer-note">

    Install from the repository and launch through Reachy Mini Apps for the full robot runtime.

    This hosted Space intentionally does not attempt to control hardware.

  </p>

</main>

"""


with gr.Blocks(title="Reachy OpenWebUI") as demo:
    gr.HTML(HTML)


if __name__ == "__main__":
    demo.launch(css=CSS)