EchoMimic V2 Character Generator

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // EchoMimic V2 API Configuration const API_BASE_URL = 'https://api.echomimic.ai/v2'; const API_KEY = Deno.env.get('ECHOMIMIC_API_KEY') || ''; // Enhanced Character Generation Hook function useCharacterGeneration() { const [character, setCharacter] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const generateCharacter = useCallback(async (config) => { setIsLoading(true); setError(null); try { const response = await fetch(`${API_BASE_URL}/characters/generate`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify({ name: config.name, personality: config.personality, complexity: config.complexityLevel || 5 }) }); if (!response.ok) { throw new Error('Character generation failed'); } const generatedCharacter = await response.json(); // Enhance character with additional details const enhancedCharacter = { ...generatedCharacter, avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${generatedCharacter.name}`, complexity: generatedCharacter.complexity || Math.floor(Math.random() * 10) + 1 }; setCharacter(enhancedCharacter); return enhancedCharacter; } catch (err) { setError(err.message); console.error('Character Generation Error:', err); } finally { setIsLoading(false); } }, []); return { character, generateCharacter, isLoading, error }; } // Advanced Personality Trait Selector function PersonalityTraitSelector({ traits, onChange }) { return (

{Object.entries(traits).map(([trait, value]) => (

{trait} onChange(trait, Number(e.target.value))} /> {value}

))}

); } // EchoMimic V2 Widget function EchoMimicWidget() { const [characterConfig, setCharacterConfig] = useState({ name: '', personality: { openness: 5, conscientiousness: 5, extraversion: 5, agreeableness: 5, neuroticism: 5 }, complexityLevel: 5 }); const { character, generateCharacter, isLoading, error } = useCharacterGeneration(); const handlePersonalityChange = (trait, value) => { setCharacterConfig(prev => ({ ...prev, personality: { ...prev.personality, [trait]: value } })); }; const handleSubmit = () => { if (!characterConfig.name.trim()) { alert('Please enter a character name'); return; } generateCharacter(characterConfig); }; return (

EchoMimic V2 Character Generator

{error && (

{error}

)} setCharacterConfig(prev => ({ ...prev, name: e.target.value }))} className="name-input" /> {character && (

{character.name}

Complexity: {character.complexity}/10

Personality Insights

{Object.entries(character.personality || {}).map(([trait, value]) => (

{trait}:

5 ? '#4CAF50' : '#FF5722' }} />

))}

)}

); } function client() { createRoot(document.getElementById("root")).render( ); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const css = ` :root { --primary-color: #6a11cb; --secondary-color: #2575fc; --background-color: #f4f6f9; --text-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; } .echomimic-widget { max-width: 500px; margin: 20px auto; background: white; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 30px; } .widget-container { display: flex; flex-direction: column; gap: 20px; } h2 { text-align: center; color: var(--primary-color); margin-bottom: 15px; } .name-input { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; transition: border-color 0.3s ease; } .name-input:focus { outline: none; border-color: var(--primary-color); } .personality-traits { display: grid; gap: 15px; } .trait-slider { display: flex; align-items: center; gap: 15px; } .trait-slider label { flex: 1; font-weight: 500; } .trait-slider input[type="range"] { flex: 2; appearance: none; height: 8px; background: #e0e0e0; border-radius: 4px; outline: none; } .trait-slider input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--primary-color); border-radius: 50%; cursor: pointer; } .generate-btn { width: 100%; padding: 12px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease; } .generate-btn:hover { transform: scale(1.05); } .generate-btn:disabled { opacity: 0.6; cursor: not-allowed; } .generated-character { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; } .character-avatar { width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--primary-color); object-fit: cover; } .character-details { width: 100%; background-color: #f4f4f4; border-radius: 10px; padding: 20px; } .personality-breakdown { margin-top: 15px; } .trait-detail { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .trait-bar { height: 10px; border-radius: 5px; transition: width 0.5s ease; } .error-message { background-color: #ffeeee; color: #ff0000; padding: 10px; border-radius: 5px; text-align: center; } @media (max-width: 600px) { .echomimic-widget { width: 95%; margin: 10px auto; padding: 20px; } } `; return new Response(` EchoMimic V2 Character Generator

`, { headers: { "content-type": "text/html", "Access-Control-Allow-Origin": "*" } }); }

sharpAmberVulture

Version 17