import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery } = useFireproof("improv-traditions") const { docs: comparisons } = useLiveQuery("createdAt", { descending: true, limit: 20 }) const [first, setFirst] = React.useState("Hindustani Classical") const [second, setSecond] = React.useState("Jazz") const [isLoading, setIsLoading] = React.useState(false) const [current, setCurrent] = React.useState(null) const traditionsA = ["Jazz", "Hindustani Classical", "Afro-Cuban Rumba", "Gamelan", "Free Jazz"] const traditionsB = ["Jazz", "West African Drumming", "European Contemporary", "Carnatic Classical", "Gamelan"] async function generateComparison() { if (first === second) return setIsLoading(true) try { const prompt = `You are a comparative musicology analyst. Compare ${first} and ${second} as improvisation traditions across five dimensions: preset structures (scales, ragas, chord changes, cycles), individual vs ensemble dynamics, tradition vs innovation balance, pedagogical pathways, and cultural purpose of improvisation. For each dimension, give a parallel analysis for both traditions. Then provide a synthesis statement on how improvisation functions as a culturally specific practice.` const schema = { properties: { presetStructures: { type: "object", properties: { a: { type: "string" }, b: { type: "string" } } }, individualEnsemble: { type: "object", properties: { a: { type: "string" }, b: { type: "string" } } }, traditionInnovation: { type: "object", properties: { a: { type: "string" }, b: { type: "string" } } }, pedagogy: { type: "object", properties: { a: { type: "string" }, b: { type: "string" } } }, culturalPurpose: { type: "object", properties: { a: { type: "string" }, b: { type: "string" } } }, synthesis: { type: "string" } } } const response = await callAI(prompt, { schema }) const data = JSON.parse(response) const doc = { traditionA: first, traditionB: second, ...data, createdAt: Date.now() } const result = await database.put(doc) setCurrent({ ...doc, _id: result.id }) } finally { setIsLoading(false) } } const displayed = current || comparisons[0] const c = { page: "min-h-screen bg-[#0f0f0f] text-[#e5e5e5] font-serif", header: "sticky top-0 z-10 bg-[#1a1a1a] border-b border-[#665533] px-4 py-4 shadow-lg", title: "text-2xl md:text-3xl tracking-widest text-[#d4af6a] font-bold uppercase", tagline: "text-xs text-[#8a8a8a] mt-1 tracking-wide", main: "max-w-3xl mx-auto px-4 py-6 space-y-6 pb-24", section: "bg-[#1a1a1a] border border-[#3d3d3d] rounded-md p-5 shadow-md", h2: "text-lg uppercase tracking-widest text-[#d4af6a] border-b border-[#665533] pb-2 mb-4", btn: "min-h-[44px] px-4 py-3 bg-[#523322] hover:bg-[#6b4530] text-[#f0e4c8] uppercase tracking-wider text-sm border border-[#8a6b3a] rounded transition disabled:opacity-50 disabled:cursor-not-allowed", btnAccent: "min-h-[44px] px-4 py-3 bg-[#8a3a2a] hover:bg-[#a04535] text-[#f0e4c8] uppercase tracking-wider text-sm border border-[#b85040] rounded transition disabled:opacity-50", input: "w-full min-h-[44px] px-3 py-2 bg-[#0f0f0f] border border-[#665533] text-[#e5e5e5] rounded focus:outline-none focus:border-[#d4af6a]", chip: "px-3 py-2 bg-[#2a2a2a] border border-[#665533] text-[#e5e5e5] rounded text-sm cursor-pointer hover:bg-[#3a3a2a]", chipActive: "px-3 py-2 bg-[#523322] border border-[#d4af6a] text-[#f0e4c8] rounded text-sm cursor-pointer", dimRow: "border-l-2 border-[#665533] pl-3 py-2", dimLabel: "text-xs uppercase tracking-widest text-[#d4af6a] mb-1", dimText: "text-sm text-[#c8c8c8] leading-relaxed", historyRow: "p-3 bg-[#0f0f0f] border border-[#3d3d3d] rounded hover:border-[#665533] cursor-pointer", muted: "text-xs text-[#8a8a8a] italic" } return (

Choose Two Traditions

First tradition

{traditionsA.map(t => ( ))}

Second tradition

{traditionsB.map(t => ( ))}

{first === second &&

Pick two different traditions.

}

The Comparison

{!displayed ? (

No comparison yet. Pick two traditions and generate one.

) : (

{displayed.traditionA} {displayed.traditionB}

{[ { key: "presetStructures", label: "Preset Structures" }, { key: "individualEnsemble", label: "Individual & Ensemble" }, { key: "traditionInnovation", label: "Tradition & Innovation" }, { key: "pedagogy", label: "Pedagogy" }, { key: "culturalPurpose", label: "Cultural Purpose" } ].map(dim => (

{dim.label}

{displayed[dim.key]?.a}

{displayed[dim.key]?.b}

))}

Synthesis

{displayed.synthesis}

)}

Past Comparisons

{comparisons.length === 0 ? (

No prior comparisons in the codex yet.

) : (

setCurrent(doc)} className={c.historyRow}>
{doc.traditionA} ↔ {doc.traditionB}

{new Date(doc.createdAt).toLocaleString()}

)}

) }