function MainComponent() { const [lyrics, setLyrics] = useState(""); const [artist, setArtist] = useState(""); const [songTitle, setSongTitle] = useState(""); const [annotations, setAnnotations] = useState([]); const [loading, setLoading] = useState(false); const [selectedAnnotation, setSelectedAnnotation] = useState(null); const [expandedAnnotations, setExpandedAnnotations] = useState({}); const [modalLoading, setModalLoading] = useState(false); const analyzeText = async ()=>{ setLoading(true); try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Analyze these song lyrics by ${artist} titled "${songTitle}". Identify 3-5 key phrases or lines and provide detailed annotations about their meaning. For each annotation, explain the cultural context, poetic techniques used, and connections to the artist's life and discography. Format your response as JSON with the following structure: { annotations: [{ text: "the exact phrase from lyrics", category: "Cultural References" | "Poetic Techniques" | "Personal Connections", explanation: "detailed annotation explaining the cultural context, poetic devices, and personal connections" }] }. Here are the lyrics: ${lyrics}` } ], json_schema: { name: "lyrics_analysis", schema: { type: "object", properties: { annotations: { type: "array", items: { type: "object", properties: { text: { type: "string" }, category: { type: "string" }, explanation: { type: "string" } }, required: [ "text", "category", "explanation" ], additionalProperties: false } } }, required: [ "annotations" ], additionalProperties: false } } }) }); const data = await response.json(); const parsedAnnotations = JSON.parse(data.choices[0].message.content); setAnnotations(parsedAnnotations.annotations); } catch (error) { console.error("Error analyzing lyrics:", error); } finally{ setLoading(false); } }; const expandAnnotation = async (annotation)=>{ if (expandedAnnotations[annotation.text]) { setSelectedAnnotation(annotation); return; } setModalLoading(true); setSelectedAnnotation(annotation); try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Provide an in-depth analysis of this lyric from ${artist}'s song "${songTitle}": "${annotation.text}". Include: 1) Historical and cultural context 2) Literary devices and symbolism 3) Connection to the artist's life and other works 4) Impact and significance in music history. Make it detailed but accessible.` } ] }) }); const data = await response.json(); setExpandedAnnotations((prev)=>({ ...prev, [annotation.text]: data.choices[0].message.content })); } catch (error) { console.error("Error expanding annotation:", error); } finally{ setModalLoading(false); } }; const renderLyricsWithAnnotations = ()=>{ if (!lyrics || annotations.length === 0) return lyrics; let result = []; let currentIndex = 0; const sortedAnnotations = [ ...annotations ].sort((a, b)=>a.startIndex - b.startIndex); sortedAnnotations.forEach((annotation, idx)=>{ if (currentIndex < annotation.startIndex) { result.push(/*#__PURE__*/ React.createElement("span", { key: `text-${idx}`, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, lyrics.slice(currentIndex, annotation.startIndex))); } const categoryColors = { cultural: "bg-[#ffd700]", poetic: "bg-[#98fb98]", personal: "bg-[#ff69b4]" }; result.push(/*#__PURE__*/ React.createElement("span", { key: `annotation-${idx}`, className: `cursor-pointer relative ${categoryColors[annotation.category]} bg-opacity-30 hover:bg-opacity-50`, onMouseEnter: ()=>setHoveredAnnotation(annotation), onMouseLeave: ()=>setHoveredAnnotation(null), __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, lyrics.slice(annotation.startIndex, annotation.endIndex), hoveredAnnotation === annotation && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 bg-white border border-gray-200 rounded-lg p-4 shadow-lg max-w-[300px] text-sm left-0 top-full mt-2", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, annotation.explanation))); currentIndex = annotation.endIndex; }); if (currentIndex < lyrics.length) { result.push(/*#__PURE__*/ React.createElement("span", { key: "text-final", __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, lyrics.slice(currentIndex))); } return result; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 156, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-6", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4 text-[#2d3748]", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, "LyricFreak"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "artist", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, "Artist Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "artist", name: "artist", value: artist, onChange: (e)=>setArtist(e.target.value), className: "w-full p-2 border border-gray-300 rounded-lg font-roboto focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Enter artist name", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "songTitle", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "Song Title"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "songTitle", name: "songTitle", value: songTitle, onChange: (e)=>setSongTitle(e.target.value), className: "w-full p-2 border border-gray-300 rounded-lg font-roboto focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Enter song title", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "lyrics", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, "Lyrics ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 198, columnNumber: 20 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("textarea", { id: "lyrics", value: lyrics, onChange: (e)=>setLyrics(e.target.value), placeholder: "Paste your song lyrics here...", className: "w-full h-[400px] p-4 border border-gray-300 rounded-lg font-roboto resize-none focus:outline-none focus:ring-2 focus:ring-blue-500", name: "lyrics", required: true, __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white px-6 py-2 rounded-lg font-roboto hover:bg-blue-600 transition-colors disabled:bg-gray-400", onClick: analyzeText, disabled: !lyrics.trim() || loading, __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, loading ? "Analyzing..." : "Analyze Lyrics")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-6 bg-white h-screen overflow-y-auto", __source: { fileName: "", lineNumber: 220, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 rounded-lg h-full p-4", __source: { fileName: "", lineNumber: 221, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4 text-[#2d3748]", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, "Annotated Lyrics"), annotations.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 mt-20 font-roboto", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-4xl mb-4", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, "Enter lyrics and click analyze to get started")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap font-roboto mb-6 p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, lyrics), [ "Cultural References", "Poetic Techniques", "Personal Connections" ].map((category)=>{ const categoryAnnotations = annotations.filter((a)=>a.category === category); if (categoryAnnotations.length === 0) return null; return /*#__PURE__*/ React.createElement("div", { key: category, className: "mb-6", __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto font-semibold mb-3", __source: { fileName: "", lineNumber: 247, columnNumber: 21 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, categoryAnnotations.map((annotation, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 252, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto italic mb-2", __source: { fileName: "", lineNumber: 253, columnNumber: 27 }, __self: this }, '"', annotation.text, '"'), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 256, columnNumber: 27 }, __self: this }, annotation.explanation), /*#__PURE__*/ React.createElement("button", { className: "text-sm text-blue-500 hover:text-blue-600 font-roboto flex items-center gap-1", onClick: ()=>expandAnnotation(annotation), disabled: modalLoading, __source: { fileName: "", lineNumber: 259, columnNumber: 27 }, __self: this }, expandedAnnotations[annotation.text] ? "View Details" : "Learn More", " ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt text-xs", __source: { fileName: "", lineNumber: 267, columnNumber: 29 }, __self: this })))))); })), selectedAnnotation && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto font-semibold", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, "Detailed Analysis"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedAnnotation(null), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto italic mb-4 text-lg", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, '"', selectedAnnotation.text, '"'), modalLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-8", __source: { fileName: "", lineNumber: 299, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 300, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none", __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap font-roboto text-gray-700", __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, expandedAnnotations[selectedAnnotation.text])))))))); }