import React, { useState, useEffect } from "react"; import { useFireproof } from 'use-fireproof'; import { callAI } from 'call-ai'; export default function App() { const { useLiveQuery, database } = useFireproof("reality-distortion-db"); const { docs: phrases } = useLiveQuery("type", { key: "distortion", descending: true }); const [topic, setTopic] = useState(""); const [loading, setLoading] = useState(false); const [displayed, setDisplayed] = useState({}); const [error, setError] = useState(""); const [speechSupported, setSpeechSupported] = useState(false); const [speaking, setSpeaking] = useState(""); const [currentWordIndex, setCurrentWordIndex] = useState(-1); // Check if speech synthesis is supported useEffect(() => { if ('speechSynthesis' in window) { setSpeechSupported(true); } return () => { if (window.speechSynthesis) { speechSynthesis.cancel(); } }; }, []); // Function to speak text word by word with different voices const speakTextWordByWord = (text, id) => { if (!speechSupported || speaking === id) return; // Cancel any ongoing speech speechSynthesis.cancel(); // Split text into words const words = text.split(/\s+/); // Set the current speaking ID setSpeaking(id); setCurrentWordIndex(0); // Function to speak a single word with a random voice const speakWord = (word, index) => { if (index >= words.length) { // We're done setSpeaking(""); setCurrentWordIndex(-1); return; } const utterance = new SpeechSynthesisUtterance(word); // Random pitch and rate for each word utterance.pitch = 0.8 + Math.random() * 0.6; // 0.8-1.4 utterance.rate = 0.7 + Math.random() * 0.6; // 0.7-1.3 utterance.volume = 0.8 + Math.random() * 0.2; // 0.8-1.0 // When this word is done, speak the next one utterance.onend = () => { setCurrentWordIndex(index + 1); speakWord(words[index + 1], index + 1); }; utterance.onerror = () => { setSpeaking(""); setCurrentWordIndex(-1); }; speechSynthesis.speak(utterance); }; // Start speaking the first word speakWord(words[0], 0); }; // Generate distortion phrases via AI async function generatePhrases(e) { e.preventDefault(); if (!topic.trim()) return; setLoading(true); setError(""); try { const gen = await callAI( `Create 3 funky, bold claims about '${topic}' in the style of Steve Jobs' "reality distortion field". Each phrase should be inspirational and future-focused. Give as JSON: phrases: [{claim, impact}] where claim is the bold statement and impact is how it will change everything.`, { stream: true, schema: { properties: { phrases: { type: "array", items: { type: "object", properties: { claim: { type: "string" }, impact: { type: "string" }, }, }, }, }, }, } ); let final = ""; for await (const part of gen) final = part; const json = JSON.parse(final); await Promise.all( (json.phrases || []).map((p) => database.put({ ...p, type: "distortion", topic, createdAt: Date.now(), }) ) ); setTopic(""); } catch (err) { setError("Failed to generate statements. Try again!"); } setLoading(false); } const addDemoData = async () => { setLoading(true); const demo = [ { claim: "This radical product will change how we see technology forever.", impact: "Everyone will question what they thought was possible.", topic: "Future Tech" }, { claim: "We're creating a whole new language for digital interaction.", impact: "Communication barriers will dissolve between humans and machines.", topic: "Interface Design" }, { claim: "This is the most insanely great thing we've ever built.", impact: "It will make everything else seem obsolete overnight.", topic: "Innovation" }, ]; for (const p of demo) { await database.put({ ...p, type: "distortion", createdAt: Date.now(), }); } setLoading(false); }; // Toggle display and speak text function toggleDisplay(p) { const id = p._id; const isDisplayed = displayed[id]; if (isDisplayed) { speakTextWordByWord(p.claim, id); } else { speakTextWordByWord(p.impact, id); } setDisplayed(prev => ({ ...prev, [id]: !prev[id] })); } function handleDelete(id) { database.del(id); } // Render a text with highlighted speaking word function renderSpeakingText(text, docId) { if (speaking !== docId || currentWordIndex === -1) { return {text}; } const words = text.split(/\s+/); return ( {words.map((word, index) => ( {word}{' '} ))} ); } return (

FUNKY REALITY DISTORTION

*Create visionary statements with a funky twist!*
Enter any topic to generate bold claims. Click cards to hear each word spoken with a unique voice.
Each word gets its own voice - weird and wonderful!

{error &&

{error}

} {!speechSupported && (

Speech synthesis not available - no funk for you!

)}

{phrases.length === 0 ? (

GET FUNKY WITH SOME STATEMENTS!

) : ( phrases.map((p) => (

toggleDisplay(p)} style={{ background: displayed[p._id] ? "#70d6ff" : "#ffffff", transition: "all 0.3s ease" }} > {speaking === p._id && (

FUNKING OUT

)}

{displayed[p._id] ? ( <>

IMPACT

"{renderSpeakingText(p.impact, p._id)}"

) : ( <>

FUNKY CLAIM

"{renderSpeakingText(p.claim, p._id)}"

)}

{p.topic}

{displayed[p._id] ? "CLICK FOR FUNKY CLAIM" : "CLICK FOR FUNKY IMPACT"} {speechSupported && ( )}

)) )}

); }