agent-starter-pack 0.3.3__py3-none-any.whl → 0.21.0__py3-none-any.whl

src/frontends/live_api_react/frontend/src/App.tsx

@@ -1,205 +0,0 @@
-/**
- * Copyright 2024 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useRef, useState } from "react";
-import "./App.scss";
-import { LiveAPIProvider } from "./contexts/LiveAPIContext";
-import SidePanel from "./components/side-panel/SidePanel";
-import ControlTray from "./components/control-tray/ControlTray";
-import cn from "classnames";
-
-const defaultHost = "localhost:8000";
-const defaultUri = `ws://${defaultHost}/`;
-
-function App() {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
-  const [serverUrl, setServerUrl] = useState<string>(defaultUri);
-  const [runId] = useState<string>(crypto.randomUUID());
-  const [userId, setUserId] = useState<string>("user1");
-
-  // Feedback state
-  const [feedbackScore, setFeedbackScore] = useState<number>(10);
-  const [feedbackText, setFeedbackText] = useState<string>("");
-  const [sendFeedback, setShowFeedback] = useState(false);
-
-  const submitFeedback = async () => {
-    const feedbackUrl = new URL('feedback', serverUrl.replace('ws', 'http')).href;
-    
-    try {
-      const response = await fetch(feedbackUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          score: feedbackScore,
-          text: feedbackText,
-          run_id: runId,
-          user_id: userId,
-          log_type: "feedback"
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`Failed to submit feedback: Server returned status ${response.status} ${response.statusText}`);
-      }
-
-      // Clear feedback after successful submission
-      setFeedbackScore(10);
-      setFeedbackText("");
-      setShowFeedback(false);
-      alert("Feedback submitted successfully!");
-    } catch (error) {
-      console.error('Error submitting feedback:', error);
-      alert(`Failed to submit feedback:  ${error}`);
-    }
-  };
-
-  return (
-    <div className="App">
-      <LiveAPIProvider url={serverUrl} userId={userId}>
-        <div className="streaming-console">
-          <SidePanel />
-          <main>
-            <div className="main-app-area">
-              <video
-                className={cn("stream", {
-                  hidden: !videoRef.current || !videoStream,
-                })}
-                ref={videoRef}
-                autoPlay
-                playsInline
-              />
-            </div>
-            <ControlTray
-              videoRef={videoRef}
-              supportsVideo={true}
-              onVideoStreamChange={setVideoStream}
-            >
-            </ControlTray>
-            <div className="url-setup" style={{position: 'absolute', top: 0, left: 0, right: 0, pointerEvents: 'auto', zIndex: 1000, padding: '2px', marginBottom: '2px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(255, 255, 255, 0.9)'}}>
-              <div>
-                <label htmlFor="server-url">Server URL:</label>
-                <input
-                  id="server-url"
-                  type="text"
-                  value={serverUrl}
-                  onChange={(e) => setServerUrl(e.target.value)}
-                  placeholder="Enter server URL"
-                  style={{
-                    cursor: 'text',
-                    padding: '4px',
-                    margin: '0 4px', 
-                    borderRadius: '2px',
-                    border: '1px solid #ccc',
-                    fontSize: '14px',
-                    fontFamily: 'system-ui, -apple-system, sans-serif',
-                    width: '200px'
-                  }}
-                />
-                <label htmlFor="user-id">User ID:</label>
-                <input
-                  id="user-id"
-                  type="text"
-                  value={userId}
-                  onChange={(e) => setUserId(e.target.value)}
-                  placeholder="Enter user ID"
-                  style={{
-                    cursor: 'text',
-                    padding: '4px',
-                    margin: '0 4px', 
-                    borderRadius: '2px',
-                    border: '1px solid #ccc',
-                    fontSize: '14px',
-                    fontFamily: 'system-ui, -apple-system, sans-serif',
-                    width: '100px'
-                  }}
-                />
-              </div>
-
-              {/* Feedback Button */}
-              <button 
-                onClick={() => setShowFeedback(!sendFeedback)}
-                style={{
-                  padding: '5px 10px',
-                  margin: '10px',
-                  cursor: 'pointer'
-                }}
-              >
-                {sendFeedback ? 'Hide Feedback' : 'Send Feedback'}
-              </button>
-            </div>
-
-            {/* Feedback Overlay Section */}
-            {sendFeedback && (
-              <div className="feedback-section" style={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                padding: '20px',
-                background: 'rgba(255, 255, 255, 0.95)',
-                boxShadow: '0 0 10px rgba(0,0,0,0.2)',
-                borderRadius: '8px',
-                zIndex: 1001,
-                minWidth: '300px'
-              }}>
-                <h3>Provide Feedback</h3>
-                <div>
-                  <label htmlFor="feedback-score">Score (0-10): </label>
-                  <input
-                    id="feedback-score"
-                    type="number"
-                    min="0"
-                    max="10"
-                    value={feedbackScore}
-                    onChange={(e) => setFeedbackScore(Number(e.target.value))}
-                    style={{margin: '0 10px'}}
-                  />
-                </div>
-                <div style={{marginTop: '10px'}}>
-                  <label htmlFor="feedback-text">Comments: </label>
-                  <textarea
-                    id="feedback-text"
-                    value={feedbackText}
-                    onChange={(e) => setFeedbackText(e.target.value)}
-                    style={{
-                      width: '100%',
-                      height: '60px',
-                      margin: '5px 0'
-                    }}
-                  />
-                </div>
-                <button
-                  onClick={submitFeedback}
-                  style={{
-                    padding: '5px 10px',
-                    marginTop: '5px',
-                    cursor: 'pointer'
-                  }}
-                >
-                  Submit Feedback
-                </button>
-              </div>
-            )}
-          </main>
-        </div>
-      </LiveAPIProvider>
-    </div>
-  );
-}
-
-export default App;

src/frontends/live_api_react/frontend/src/components/control-tray/ControlTray.tsx

@@ -1,217 +0,0 @@
-/**
- * Copyright 2024 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import cn from "classnames";
-
-import { memo, ReactNode, RefObject, useEffect, useRef, useState } from "react";
-import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
-import { UseMediaStreamResult } from "../../hooks/use-media-stream-mux";
-import { useScreenCapture } from "../../hooks/use-screen-capture";
-import { useWebcam } from "../../hooks/use-webcam";
-import { AudioRecorder } from "../../utils/audio-recorder";
-import AudioPulse from "../audio-pulse/AudioPulse";
-import "./control-tray.scss";
-
-export type ControlTrayProps = {
-  videoRef: RefObject<HTMLVideoElement>;
-  children?: ReactNode;
-  supportsVideo: boolean;
-  onVideoStreamChange?: (stream: MediaStream | null) => void;
-};
-
-type MediaStreamButtonProps = {
-  isStreaming: boolean;
-  onIcon: string;
-  offIcon: string;
-  start: () => Promise<any>;
-  stop: () => any;
-};
-
-/**
- * button used for triggering webcam or screen-capture
- */
-const MediaStreamButton = memo(
-  ({ isStreaming, onIcon, offIcon, start, stop }: MediaStreamButtonProps) =>
-    isStreaming ? (
-      <button className="action-button" onClick={stop}>
-        <span className="material-symbols-outlined">{onIcon}</span>
-      </button>
-    ) : (
-      <button className="action-button" onClick={start}>
-        <span className="material-symbols-outlined">{offIcon}</span>
-      </button>
-    ),
-);
-
-function ControlTray({
-  videoRef,
-  children,
-  onVideoStreamChange = () => {},
-  supportsVideo,
-}: ControlTrayProps) {
-  const videoStreams = [useWebcam(), useScreenCapture()];
-  const [activeVideoStream, setActiveVideoStream] =
-    useState<MediaStream | null>(null);
-  const [webcam, screenCapture] = videoStreams;
-  const [inVolume, setInVolume] = useState(0);
-  const [audioRecorder] = useState(() => new AudioRecorder());
-  const [muted, setMuted] = useState(false);
-  const renderCanvasRef = useRef<HTMLCanvasElement>(null);
-  const connectButtonRef = useRef<HTMLButtonElement>(null);
-
-  const { client, connected, connect, disconnect, volume } =
-    useLiveAPIContext();
-
-  useEffect(() => {
-    if (!connected && connectButtonRef.current) {
-      connectButtonRef.current.focus();
-    }
-  }, [connected]);
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      "--volume",
-      `${Math.max(5, Math.min(inVolume * 200, 8))}px`,
-    );
-  }, [inVolume]);
-
-  useEffect(() => {
-    const onData = (base64: string) => {
-      client.sendRealtimeInput([
-        {
-          mimeType: "audio/pcm;rate=16000",
-          data: base64,
-        },
-      ]);
-    };
-    if (connected && !muted && audioRecorder) {
-      audioRecorder.on("data", onData).on("volume", setInVolume).start();
-    } else {
-      audioRecorder.stop();
-    }
-    return () => {
-      audioRecorder.off("data", onData).off("volume", setInVolume);
-    };
-  }, [connected, client, muted, audioRecorder]);
-
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.srcObject = activeVideoStream;
-    }
-
-    let timeoutId = -1;
-
-    function sendVideoFrame() {
-      const video = videoRef.current;
-      const canvas = renderCanvasRef.current;
-
-      if (!video || !canvas) {
-        return;
-      }
-
-      const ctx = canvas.getContext("2d")!;
-      canvas.width = video.videoWidth * 0.25;
-      canvas.height = video.videoHeight * 0.25;
-      if (canvas.width + canvas.height > 0) {
-        ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
-        const base64 = canvas.toDataURL("image/jpeg", 1.0);
-        const data = base64.slice(base64.indexOf(",") + 1, Infinity);
-        client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]);
-      }
-      if (connected) {
-        timeoutId = window.setTimeout(sendVideoFrame, 1000 / 0.5);
-      }
-    }
-    if (connected && activeVideoStream !== null) {
-      requestAnimationFrame(sendVideoFrame);
-    }
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [connected, activeVideoStream, client, videoRef]);
-
-  //handler for swapping from one video-stream to the next
-  const changeStreams = (next?: UseMediaStreamResult) => async () => {
-    if (next) {
-      const mediaStream = await next.start();
-      setActiveVideoStream(mediaStream);
-      onVideoStreamChange(mediaStream);
-    } else {
-      setActiveVideoStream(null);
-      onVideoStreamChange(null);
-    }
-
-    videoStreams.filter((msr) => msr !== next).forEach((msr) => msr.stop());
-  };
-
-  return (
-    <section className="control-tray">
-      <canvas style={{ display: "none" }} ref={renderCanvasRef} />
-      <nav className={cn("actions-nav", { disabled: !connected })}>
-        <button
-          className={cn("action-button mic-button")}
-          onClick={() => setMuted(!muted)}
-        >
-          {!muted ? (
-            <span className="material-symbols-outlined filled">mic</span>
-          ) : (
-            <span className="material-symbols-outlined filled">mic_off</span>
-          )}
-        </button>
-
-        <div className="action-button no-action outlined">
-          <AudioPulse volume={volume} active={connected} hover={false} />
-        </div>
-
-        {supportsVideo && (
-          <>
-            <MediaStreamButton
-              isStreaming={screenCapture.isStreaming}
-              start={changeStreams(screenCapture)}
-              stop={changeStreams()}
-              onIcon="cancel_presentation"
-              offIcon="present_to_all"
-            />
-            <MediaStreamButton
-              isStreaming={webcam.isStreaming}
-              start={changeStreams(webcam)}
-              stop={changeStreams()}
-              onIcon="videocam_off"
-              offIcon="videocam"
-            />
-          </>
-        )}
-        {children}
-      </nav>
-
-      <div className={cn("connection-container", { connected })}>
-        <div className="connection-button-container">
-          <button
-            ref={connectButtonRef}
-            className={cn("action-button connect-toggle", { connected })}
-            onClick={connected ? disconnect : connect}
-          >
-            <span className="material-symbols-outlined filled">
-              {connected ? "pause" : "play_arrow"}
-            </span>
-          </button>
-        </div>
-        <span className="text-indicator">Streaming</span>
-      </div>
-    </section>
-  );
-}
-
-export default memo(ControlTray);

src/frontends/live_api_react/frontend/src/components/control-tray/control-tray.scss

@@ -1,201 +0,0 @@
-/**
- * Copyright 2025 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* stylelint-disable */
-.action-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--Neutral-20);
-  color: var(--Neutral-60);
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  text-transform: lowercase;
-  cursor: pointer;
-  animation: opacity-pulse 3s ease-in infinite;
-  transition: all 0.2s ease-in-out;
-  width: 48px;
-  height: 48px;
-  border-radius: 18px;
-  border: 1px solid rgba(0, 0, 0, 0);
-  user-select: none;
-  cursor: pointer;
-
-  &:focus {
-    border: 2px solid var(--Neutral-20);
-    outline: 2px solid var(--Neutral-80);
-  }
-
-  &.outlined {
-    background: var(--Neutral-2);
-    border: 1px solid var(--Neutral-20);
-  }
-
-  .no-action {
-    pointer-events: none;
-  }
-
-  &:hover {
-    background: rgba(0, 0, 0, 0);
-    border: 1px solid var(--Neutral-20);
-  }
-
-  &.connected {
-    background: var(--Blue-800);
-    color: var(--Blue-500);
-
-    &:hover {
-      border: 1px solid var(--Blue-500);
-    }
-  }
-}
-
-@property --volume {
-  syntax: "length";
-  inherit: false;
-  initial-value: 0px;
-}
-
-.disabled .mic-button,
-.mic-button.disabled {
-  &:before {
-    background: rgba(0, 0, 0, 0);
-  }
-}
-
-.mic-button {
-  position: relative;
-  background-color: var(--accent-red);
-  z-index: 1;
-  color: black;
-  transition: all 0.2s ease-in;
-
-  &:focus {
-    border: 2px solid var(--Neutral-20);
-    outline: 2px solid var(--Red-500);
-  }
-
-  &:hover {
-    background-color: var(--Red-400);
-  }
-
-  &:before {
-    position: absolute;
-    z-index: -1;
-    top: calc(var(--volume) * -1);
-    left: calc(var(--volume) * -1);
-    display: block;
-    content: "";
-    opacity: 0.35;
-    background-color: var(--Red-500);
-    width: calc(100% + var(--volume) * 2);
-    height: calc(100% + var(--volume) * 2);
-    border-radius: 24px;
-    transition: all 0.02s ease-in-out;
-  }
-}
-
-.connect-toggle {
-  &:focus {
-    border: 2px solid var(--Neutral-20);
-    outline: 2px solid var(--Neutral-80);
-  }
-
-  &:not(.connected) {
-    background-color: var(--Blue-500);
-    color: var(--Neutral-5);
-  }
-}
-
-.control-tray {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  display: inline-flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 8px;
-  padding-bottom: 18px;
-
-  .disabled .action-button,
-  .action-button.disabled {
-    background: rgba(0, 0, 0, 0);
-    border: 1px solid var(--Neutral-30, #404547);
-    color: var(--Neutral-30);
-  }
-
-  .connection-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-
-    .connection-button-container {
-      border-radius: 27px;
-      border: 1px solid var(--Neutral-30);
-      background: var(--Neutral-5);
-      padding: 10px;
-    }
-
-    .text-indicator {
-      font-size: 11px;
-      color: var(--Blue-500);
-      user-select: none;
-    }
-
-    &:not(.connected) {
-      .text-indicator {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.actions-nav {
-  background: var(--Neutral-5);
-  border: 1px solid var(--Neutral-30);
-  border-radius: 27px;
-  display: inline-flex;
-  gap: 12px;
-  align-items: center;
-  overflow: clip;
-  padding: 10px;
-
-  transition: all 0.6s ease-in;
-
-  & > * {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: 1rem;
-  }
-}
-
-@keyframes opacity-pulse {
-  0% {
-    opacity: 0.9;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.9;
-  }
-}