mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-05 18:09:23 +08:00
Adding nextjs + 11labs + openai streaming demo (#139)
* adding nextjs + 11labs + openai streaming demo * removing package-lock
This commit is contained in:
Rohan Richard
GitHub
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { Mic, Square } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AIVoiceInputProps {
|
||||
onStart?: () => void;
|
||||
onStop?: (duration: number) => void;
|
||||
isConnected?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AIVoiceInput({
|
||||
onStart,
|
||||
onStop,
|
||||
isConnected = false,
|
||||
className
|
||||
}: AIVoiceInputProps) {
|
||||
const [active, setActive] = useState(false);
|
||||
const [time, setTime] = useState(0);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [status, setStatus] = useState<'disconnected' | 'connecting' | 'connected'>('disconnected');
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId: NodeJS.Timeout;
|
||||
|
||||
if (active) {
|
||||
intervalId = setInterval(() => {
|
||||
setTime((t) => t + 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
setTime(0);
|
||||
}
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isConnected) {
|
||||
setStatus('connected');
|
||||
setActive(true);
|
||||
} else {
|
||||
setStatus('disconnected');
|
||||
setActive(false);
|
||||
}
|
||||
}, [isConnected]);
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const handleStart = () => {
|
||||
setStatus('connecting');
|
||||
onStart?.();
|
||||
};
|
||||
|
||||
const handleStop = () => {
|
||||
onStop?.(time);
|
||||
setStatus('disconnected');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("w-full py-4", className)}>
|
||||
<div className="relative max-w-xl w-full mx-auto flex items-center flex-col gap-4">
|
||||
<div className={cn(
|
||||
"px-2 py-1 rounded-md text-xs font-medium bg-black/10 dark:bg-white/10 text-gray-700 dark:text-white"
|
||||
)}>
|
||||
{status === 'connected' ? 'Connected' : status === 'connecting' ? 'Connecting...' : 'Disconnected'}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={cn(
|
||||
"group w-16 h-16 rounded-xl flex items-center justify-center transition-colors",
|
||||
active
|
||||
? "bg-red-500/20 hover:bg-red-500/30"
|
||||
: "bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
||||
)}
|
||||
type="button"
|
||||
onClick={active ? handleStop : handleStart}
|
||||
disabled={status === 'connecting'}
|
||||
>
|
||||
{status === 'connecting' ? (
|
||||
<div
|
||||
className="w-6 h-6 rounded-sm animate-spin bg-black dark:bg-white cursor-pointer pointer-events-auto"
|
||||
style={{ animationDuration: "3s" }}
|
||||
/>
|
||||
) : active ? (
|
||||
<Square className="w-6 h-6 text-red-500" />
|
||||
) : (
|
||||
<Mic className="w-6 h-6 text-black/70 dark:text-white/70" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono text-sm transition-opacity duration-300",
|
||||
active
|
||||
? "text-black/70 dark:text-white/70"
|
||||
: "text-black/30 dark:text-white/30"
|
||||
)}
|
||||
>
|
||||
{formatTime(time)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import clsx from "clsx";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface BackgroundCirclesProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
variant?: keyof typeof COLOR_VARIANTS;
|
||||
audioLevel?: number;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
const COLOR_VARIANTS = {
|
||||
primary: {
|
||||
border: [
|
||||
"border-emerald-500/60",
|
||||
"border-cyan-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-emerald-500/30",
|
||||
},
|
||||
secondary: {
|
||||
border: [
|
||||
"border-violet-500/60",
|
||||
"border-fuchsia-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-violet-500/30",
|
||||
},
|
||||
tertiary: {
|
||||
border: [
|
||||
"border-orange-500/60",
|
||||
"border-yellow-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-orange-500/30",
|
||||
},
|
||||
quaternary: {
|
||||
border: [
|
||||
"border-purple-500/60",
|
||||
"border-pink-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-purple-500/30",
|
||||
},
|
||||
quinary: {
|
||||
border: [
|
||||
"border-red-500/60",
|
||||
"border-rose-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-red-500/30",
|
||||
}, // red
|
||||
senary: {
|
||||
border: [
|
||||
"border-blue-500/60",
|
||||
"border-sky-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-blue-500/30",
|
||||
}, // blue
|
||||
septenary: {
|
||||
border: [
|
||||
"border-gray-500/60",
|
||||
"border-gray-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-gray-500/30",
|
||||
},
|
||||
octonary: {
|
||||
border: [
|
||||
"border-red-500/60",
|
||||
"border-rose-400/50",
|
||||
"border-slate-600/30",
|
||||
],
|
||||
gradient: "from-red-500/30",
|
||||
},
|
||||
} as const;
|
||||
|
||||
const AnimatedGrid = () => (
|
||||
<motion.div
|
||||
className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 0%", "100% 100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 40,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
<div className="h-full w-full [background-image:repeating-linear-gradient(100deg,#64748B_0%,#64748B_1px,transparent_1px,transparent_4%)] opacity-20" />
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
export function BackgroundCircles({
|
||||
title = "",
|
||||
description = "",
|
||||
className,
|
||||
variant = "octonary",
|
||||
audioLevel = 0,
|
||||
isActive = false,
|
||||
}: BackgroundCirclesProps) {
|
||||
const variantStyles = COLOR_VARIANTS[variant];
|
||||
const [animationParams, setAnimationParams] = useState({
|
||||
scale: 1,
|
||||
duration: 5,
|
||||
intensity: 0
|
||||
});
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
// Initial page load animation
|
||||
useEffect(() => {
|
||||
// Small delay to ensure the black screen is visible first
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoaded(true);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// Update animation based on audio level
|
||||
useEffect(() => {
|
||||
if (isActive && audioLevel > 0) {
|
||||
// Simple enhancement of audio level for more dramatic effect
|
||||
const enhancedLevel = Math.min(1, audioLevel * 1.5);
|
||||
|
||||
setAnimationParams({
|
||||
scale: 1 + enhancedLevel * 0.3,
|
||||
duration: Math.max(2, 5 - enhancedLevel * 3),
|
||||
intensity: enhancedLevel
|
||||
});
|
||||
} else if (animationParams.intensity > 0) {
|
||||
// Only reset if we need to (prevents unnecessary updates)
|
||||
const timer = setTimeout(() => {
|
||||
setAnimationParams({
|
||||
scale: 1,
|
||||
duration: 5,
|
||||
intensity: 0
|
||||
});
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [audioLevel, isActive, animationParams.intensity]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Initial black overlay that fades out */}
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black z-50"
|
||||
initial={{ opacity: 1 }}
|
||||
animate={{ opacity: isLoaded ? 0 : 1 }}
|
||||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||||
style={{ pointerEvents: isLoaded ? "none" : "auto" }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
"relative flex h-screen w-full items-center justify-center overflow-hidden",
|
||||
"bg-white dark:bg-black/5",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<AnimatedGrid />
|
||||
<motion.div
|
||||
className="absolute h-[480px] w-[480px]"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{
|
||||
opacity: isLoaded ? 1 : 0,
|
||||
scale: isLoaded ? 1 : 0.9
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
delay: 0.3,
|
||||
ease: "easeOut"
|
||||
}}
|
||||
>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className={clsx(
|
||||
"absolute inset-0 rounded-full",
|
||||
"border-2 bg-gradient-to-br to-transparent",
|
||||
variantStyles.border[i],
|
||||
variantStyles.gradient
|
||||
)}
|
||||
animate={{
|
||||
rotate: 360,
|
||||
scale: [
|
||||
1 + (i * 0.05),
|
||||
(1 + (i * 0.05)) * (1 + (isActive ? animationParams.intensity * 0.2 : 0.02)),
|
||||
1 + (i * 0.05)
|
||||
],
|
||||
opacity: [
|
||||
0.7 + (i * 0.1),
|
||||
0.8 + (i * 0.1) + (isActive ? animationParams.intensity * 0.2 : 0),
|
||||
0.7 + (i * 0.1)
|
||||
]
|
||||
}}
|
||||
transition={{
|
||||
duration: isActive ? animationParams.duration : 8 + (i * 2),
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"absolute inset-0 rounded-full mix-blend-screen",
|
||||
`bg-[radial-gradient(ellipse_at_center,${variantStyles.gradient.replace(
|
||||
"from-",
|
||||
""
|
||||
)}/10%,transparent_70%)]`
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<div className="absolute inset-0 [mask-image:radial-gradient(90%_60%_at_50%_50%,#000_40%,transparent)]">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,#0F766E/30%,transparent_70%)] blur-[120px]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: isLoaded ? 0.7 : 0,
|
||||
scale: [1, 1 + (isActive ? animationParams.intensity * 0.3 : 0.02), 1],
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 1.8, delay: 0.5 },
|
||||
scale: {
|
||||
duration: isActive ? 2 : 12,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "easeInOut",
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,#2DD4BF/15%,transparent)] blur-[80px]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: isLoaded ? 1 : 0,
|
||||
scale: [1, 1 + (isActive ? animationParams.intensity * 0.4 : 0.03), 1]
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 2, delay: 0.7 },
|
||||
scale: {
|
||||
duration: isActive ? 1.5 : 15,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "easeInOut",
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Additional glow that appears only during high audio levels */}
|
||||
{isActive && animationParams.intensity > 0.4 && (
|
||||
<motion.div
|
||||
className={`absolute inset-0 bg-[radial-gradient(ellipse_at_center,${variantStyles.gradient.replace("from-", "")}/20%,transparent_70%)] blur-[60px]`}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{
|
||||
opacity: [0, animationParams.intensity * 0.6, 0],
|
||||
scale: [0.8, 1.1, 0.8],
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function DemoCircles() {
|
||||
const [currentVariant, setCurrentVariant] =
|
||||
useState<keyof typeof COLOR_VARIANTS>("octonary");
|
||||
|
||||
const variants = Object.keys(
|
||||
COLOR_VARIANTS
|
||||
) as (keyof typeof COLOR_VARIANTS)[];
|
||||
|
||||
function getNextVariant() {
|
||||
const currentIndex = variants.indexOf(currentVariant);
|
||||
const nextVariant = variants[(currentIndex + 1) % variants.length];
|
||||
return nextVariant;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BackgroundCircles variant={currentVariant} />
|
||||
<div className="absolute top-12 right-12">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-slate-950 dark:bg-white text-white dark:text-slate-950 px-4 py-1 rounded-md z-10 text-sm font-medium"
|
||||
onClick={() => {
|
||||
setCurrentVariant(getNextVariant());
|
||||
}}
|
||||
>
|
||||
Change Variant
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
"use client"
|
||||
|
||||
import { Trash } from "lucide-react"
|
||||
|
||||
export function ResetChat() {
|
||||
return (
|
||||
<button
|
||||
className="w-10 h-10 rounded-md flex items-center justify-center transition-colors relative overflow-hidden bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
||||
aria-label="Reset chat"
|
||||
onClick={() => fetch("http://localhost:8000/reset")}
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<Trash className="h-5 w-5 text-black/70 dark:text-white/70" />
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
interface ThemeToggleProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ThemeToggle({ className }: ThemeToggleProps) {
|
||||
const { theme } = useTheme();
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const toggleTheme = () => {
|
||||
// Instead of directly changing the theme, dispatch a custom event
|
||||
const newTheme = theme === "light" ? "dark" : "light";
|
||||
|
||||
// Dispatch custom event with the new theme
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('themeToggleRequest', {
|
||||
detail: { theme: newTheme }
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
onClick={toggleTheme}
|
||||
className={cn(
|
||||
"w-10 h-10 rounded-md flex items-center justify-center transition-colors relative overflow-hidden",
|
||||
"bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20",
|
||||
className
|
||||
)}
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
{theme === "light" ? (
|
||||
<Moon className="h-5 w-5 text-black/70" />
|
||||
) : (
|
||||
<Sun className="h-5 w-5 text-white/70" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Small inner animation for the button itself */}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 transition-transform duration-500",
|
||||
theme === "light"
|
||||
? "bg-gradient-to-br from-blue-500/20 to-purple-500/20 translate-y-full"
|
||||
: "bg-gradient-to-br from-amber-500/20 to-orange-500/20 -translate-y-full"
|
||||
)}
|
||||
style={{
|
||||
transitionTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)"
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
interface ThemeTransitionProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ThemeTransition({ className }: ThemeTransitionProps) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const [pendingTheme, setPendingTheme] = useState<string | null>(null);
|
||||
const [visualTheme, setVisualTheme] = useState<string | null>(theme);
|
||||
|
||||
// Track mouse/touch position for click events
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setPosition({ x: e.clientX, y: e.clientY });
|
||||
};
|
||||
|
||||
const handleTouchMove = (e: TouchEvent) => {
|
||||
if (e.touches[0]) {
|
||||
setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("touchmove", handleTouchMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("touchmove", handleTouchMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Listen for theme toggle requests
|
||||
useEffect(() => {
|
||||
// Custom event for theme toggle requests
|
||||
const handleThemeToggle = (e: CustomEvent) => {
|
||||
if (isAnimating) return; // Prevent multiple animations
|
||||
|
||||
const newTheme = e.detail.theme;
|
||||
if (newTheme === theme) return;
|
||||
|
||||
// Store the pending theme but don't apply it yet
|
||||
setPendingTheme(newTheme);
|
||||
setIsAnimating(true);
|
||||
|
||||
// The actual theme will be applied mid-animation
|
||||
};
|
||||
|
||||
window.addEventListener('themeToggleRequest' as any, handleThemeToggle as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('themeToggleRequest' as any, handleThemeToggle as EventListener);
|
||||
};
|
||||
}, [theme, isAnimating]);
|
||||
|
||||
// Apply the theme change mid-animation
|
||||
useEffect(() => {
|
||||
if (isAnimating && pendingTheme) {
|
||||
// Set visual theme immediately for the animation
|
||||
setVisualTheme(pendingTheme);
|
||||
|
||||
// Apply the actual theme change after a delay (mid-animation)
|
||||
const timer = setTimeout(() => {
|
||||
setTheme(pendingTheme as any);
|
||||
}, 400); // Half of the animation duration
|
||||
|
||||
// End the animation after it completes
|
||||
const endTimer = setTimeout(() => {
|
||||
setIsAnimating(false);
|
||||
setPendingTheme(null);
|
||||
}, 1000); // Match with animation duration
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
clearTimeout(endTimer);
|
||||
};
|
||||
}
|
||||
}, [isAnimating, pendingTheme, setTheme]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isAnimating && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-[9999] pointer-events-none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`absolute rounded-full ${visualTheme === 'dark' ? 'bg-slate-950' : 'bg-white'}`}
|
||||
initial={{
|
||||
width: 0,
|
||||
height: 0,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
borderRadius: '100%'
|
||||
}}
|
||||
animate={{
|
||||
width: Math.max(window.innerWidth * 3, window.innerHeight * 3),
|
||||
height: Math.max(window.innerWidth * 3, window.innerHeight * 3),
|
||||
x: position.x - Math.max(window.innerWidth * 3, window.innerHeight * 3) / 2,
|
||||
y: position.y - Math.max(window.innerWidth * 3, window.innerHeight * 3) / 2,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
ease: [0.22, 1, 0.36, 1]
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user