/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Define an interface for quote extraction results interface QuoteResult { quote: string; speaker: string; } function App() { const [text, setText] = useState(''); const [quotes, setQuotes] = useState([]); const [isLoading, setIsLoading] = useState(false); const extractQuotes = async () => { setIsLoading(true); try { const response = await fetch('/extract', { method: 'POST', body: JSON.stringify({ text }) }); const result = await response.json(); setQuotes(result.quotes); } catch (error) { console.error('Quote extraction failed', error); setQuotes([]); } finally { setIsLoading(false); } }; return (

📜 Quote Extractor

setText(e.target.value)}
        placeholder="Paste your text here..."
        rows={6}
        style={{ 
          width: '100%', 
          marginBottom: '10px', 
          backgroundColor: '#1e1e1e', 
          color: '#e0e0e0', 
          border: '1px solid #333', 
          borderRadius: '4px',
          padding: '10px'
        }}
      />
      <button 
        onClick={extractQuotes} 
        disabled={isLoading}
        style={{
          backgroundColor: '#bb86fc',
          color: '#000',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer',
          width: '100%',
          opacity: isLoading ? 0.5 : 1
        }}
      >
        {isLoading ? 'Extracting...' : 'Extract Quotes'}
      </button>
      {quotes.length > 0 && (
        <div>
          <h2 style={{ 
            color: '#bb86fc', 
            borderBottom: '1px solid #333', 
            paddingBottom: '10px' 
          }}>
            Extracted Quotes:
          </h2>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            {quotes.map((quoteObj, index) => (
              <li 
                key={index} 
                style={{ 
                  marginBottom: '15px', 
                  padding: '10px', 
                  backgroundColor: '#1e1e1e', 
                  borderRadius: '5px',
                  border: '1px solid #333'
                }}
              >
                <strong style={{ color: '#03dac6' }}>
                  🗣️ {quoteObj.speaker || 'Unknown Speaker'}
                </strong>
                <blockquote style={{ 
                  margin: '5px 0', 
                  fontStyle: 'italic',
                  color: '#e0e0e0',
                  borderLeft: '4px solid #bb86fc',
                  paddingLeft: '10px'
                }}>
                  "{quoteObj.quote}"
                </blockquote>
              </li>
            ))}
          </ul>
        </div>
      )}
      <div style={{
        position: 'absolute',
        bottom: '10px',
        left: '0',
        width: '100%',
        textAlign: 'center'
      }}>
        <a 
          href="https://duyhua.com" 
          target="_blank"
          rel="noopener noreferrer"
          style={{ 
            color: '#666', 
            fontSize: '0.7em',
            textDecoration: 'none'
          }}
        >
          © {new Date().getFullYear()} Duy Hua
        </a>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  if (request.method === 'POST' && request.url.endsWith('/extract')) {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();
    
    const { text } = await request.json();
    
    const completion = await openai.chat.completions.create({
      messages: [
        { 
          role: "system", 
          content: `Extract quotes from the text with their speakers. 
          Return a JSON object with a 'quotes' array. 
          Each quote object should have 'quote' and 'speaker' fields. 
          If no speaker is identifiable, use 'Unknown' as the speaker. 
          Format: { "quotes": [{"quote": "...", "speaker": "..."}, ...] }` 
        },
        { 
          role: "user", 
          content: text 
        }
      ],
      model: "gpt-4o-mini",
      response_format: { type: "json_object" }
    });

const result = JSON.parse(completion.choices[0].message.content || '{"quotes": []}');
    
    return new Response(JSON.stringify(result), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

return new Response(`
    <html>
      <head>
        <title>Quote Extractor</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          body { 
            font-family: 'Arial', sans-serif; 
            line-height: 1.6; 
            background-color: #121212; 
            color: #e0e0e0; 
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}</article></body></html>

dh1011