\n {/* Header */}\n

\n 📄 TLDR This\n

\n Summarize any article or text in seconds\n

\n Paste a URL or article text below to get a concise 1-3 sentence summary\n

\n\n {/* Main Form */}\n

\n {/* Input Section */}\n

\n \n {isUrl ? \"🔗 Article URL\" : \"📝 Article Text\"}\n \n

\n \n Try Example\n \n {content && (\n \n Clear\n \n )}\n

\n \n handleContentChange(e.target.value)}\n placeholder={isUrl \n ? \"https://example.com/article-to-summarize\" \n : \"Paste your article text here...\"\n }\n className=\"w-full h-32 md:h-40 p-4 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-transparent resize-none\"\n disabled={isLoading}\n />\n \n {content && (\n

\n {isUrl ? \"🔗 Detected as URL\" : `📝 ${content.length} characters`}\n

\n )}\n

\n\n {/* Submit Button */}\n \n {isLoading ? (\n <>\n

\n {isUrl ? \"Fetching & Summarizing...\" : \"Summarizing...\"}\n \n ) : (\n <>\n ✨ Summarize\n \n )}\n \n \n

\n\n {/* Results Section */}\n {result && (\n

\n {result.success ? (\n

\n {/* Success Result */}\n

✅

\n Summary\n

\n {result.title && result.title !== \"User Content\" && (\n

\n Title: {result.title}\n

\n )}\n

\n {result.summary}\n

\n {result.originalUrl && (\n

\n Source:{\" \"}\n \n {result.originalUrl}\n \n

\n )}\n

\n ) : (\n

\n {/* Error Result */}\n

❌

\n Error\n

\n {result.error}\n

\n )}\n

\n )}\n\n {/* Footer */}\n

\n Powered by OpenAI • Built with ❤️ on Val Town\n

\n );\n}",[],[193,200,207],[193,200],{"_103":217,"_95":172,"_154":218,"_156":194,"_157":139,"_158":219,"_160":161,"_105":220,"_100":32,"_163":176,"_165":221,"_166":22,"_167":-5,"_168":222,"_98":223},"c68a4a7a-3f8b-11f0-a951-76b3cceeab13","c68a4b4c-3f8b-11f0-a951-76b3cceeab13",9,["D",1748853001237],"# Frontend - TLDR This\n\nThe frontend is a React application that provides a clean, user-friendly interface for article summarization.\n\n## Features\n\n- **Auto-Detection**: Automatically detects if input is a URL or text content\n- **Real-time Feedback**: Shows loading states and character counts\n- **Responsive Design**: Works well on desktop and mobile devices\n- **Error Handling**: Clear error messages for various failure scenarios\n- **Example Content**: Quick \"Try Example\" button for testing\n\n## Components\n\n### App.tsx\nMain application component that handles:\n- Form state management\n- API communication\n- URL/text detection\n- Loading and error states\n- Results display\n\n## Styling\n\n- **TailwindCSS**: Used via CDN for utility-first styling\n- **Glass Effect**: Modern glassmorphism design with backdrop blur\n- **Gradient Background**: Beautiful gradient background\n- **Animations**: Smooth transitions and loading animations\n\n## User Experience\n\n1. **Input Detection**: Automatically detects URLs vs text content\n2. **Visual Feedback**: Clear indicators for URL vs text mode\n3. **Loading States**: Spinner and descriptive loading messages\n4. **Error Handling**: User-friendly error messages\n5. **Results Display**: Clean summary presentation with source attribution\n\n## Browser Compatibility\n\nWorks in all modern browsers that support:\n- ES6+ JavaScript\n- CSS Grid and Flexbox\n- Fetch API\n- React 18",[],[193,172],{"_103":225,"_95":226,"_154":227,"_156":194,"_157":139,"_158":195,"_160":161,"_105":228,"_100":32,"_163":176,"_165":229,"_166":22,"_167":-5,"_168":230,"_98":231},"aa6eadf4-3f8b-11f0-a055-76b3cceeab13","index.html","aa6eaef8-3f8b-11f0-a055-76b3cceeab13",["D",1748852954079],"\n\n\n \n \n TLDR This - Article Summarizer\n \n \n \n\n\n

\n \n \n\n",[],[193,226],{"_103":233,"_95":234,"_154":235,"_156":194,"_157":139,"_158":236,"_160":161,"_105":237,"_100":32,"_163":211,"_165":238,"_166":22,"_167":-5,"_168":239,"_98":240},"addef2be-3f8b-11f0-b010-76b3cceeab13","index.tsx","addef386-3f8b-11f0-b010-76b3cceeab13",7,["D",1748852959850],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"/frontend/components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[193,234],[193],{"_103":243,"_95":244,"_154":245,"_156":-5,"_157":139,"_158":246,"_160":161,"_105":247,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":248,"_98":265},"8b757d88-3f8b-11f0-aa0f-76b3cceeab13","shared","675d3b8f-c180-4179-9f97-6fdb8a6b3611",2,["D",1748852902113],[249,257],{"_103":250,"_95":172,"_154":251,"_156":245,"_157":139,"_158":252,"_160":161,"_105":253,"_100":32,"_163":176,"_165":254,"_166":22,"_167":-5,"_168":255,"_98":256},"8e532ffa-3f8b-11f0-b6c9-76b3cceeab13","8e5330a4-3f8b-11f0-b6c9-76b3cceeab13",3,["D",1748852906925],"# Shared Utilities\n\nThis directory contains TypeScript types and utilities shared between the frontend and backend.\n\n## Files\n\n- `types.ts` - TypeScript interfaces for API requests/responses and data structures\n\n## Usage\n\nImport shared types in both frontend and backend:\n\n```ts\nimport { SummarizeRequest, SummarizeResponse } from \"/shared/types.ts\";\n```\n\nNote: Files in this directory must work in both browser and server environments, so avoid using Deno-specific APIs.",[],[244,172],{"_103":258,"_95":259,"_154":260,"_156":245,"_157":139,"_158":184,"_160":161,"_105":261,"_100":246,"_163":211,"_165":262,"_166":22,"_167":-5,"_168":263,"_98":264},"a47199b8-3f93-11f0-bd77-76b3cceeab13","types.ts","8b75752c-3f8b-11f0-aa0f-76b3cceeab13",["D",1748856380003],"// Shared types for TLDR This application\n\nexport interface SummarizeRequest {\n content: string;\n isUrl: boolean;\n}\n\nexport interface SummarizeResponse {\n success: boolean;\n summary?: string;\n error?: string;\n originalUrl?: string;\n title?: string;\n}\n\nexport interface ArticleContent {\n title: string;\n content: string;\n url?: string;\n}",[],[244,259],[244],{"_103":267,"_95":99,"_154":268,"_156":-5,"_157":139,"_158":138,"_160":161,"_105":269,"_100":119,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":270,"_98":271},"d9720064-3f96-11f0-b698-76b3cceeab13","a6c805dc-3f96-11f0-9f39-76b3cceeab13",["D",1748857757417],[],[99],{"_103":273,"_95":172,"_154":274,"_156":-5,"_157":139,"_158":184,"_160":161,"_105":275,"_100":252,"_163":176,"_165":276,"_166":22,"_167":-5,"_168":277,"_98":278},"a4717bd6-3f93-11f0-bd77-76b3cceeab13","890f5e06-3f8b-11f0-8d59-76b3cceeab13",["D",1748856380003],"# TLDR This - Article Summarizer\n\nA simple web application that summarizes articles and URLs into 1-3 sentence summaries using OpenAI's API.\n\n## Features\n\n- **Simple Interface**: Clean textarea for pasting URLs or article text\n- **Smart Summarization**: Uses OpenAI API to generate concise 1-3 sentence summaries\n- **URL Support**: Automatically fetches and summarizes content from URLs\n- **Error Handling**: Graceful handling of invalid URLs, API failures, and other errors\n- **Responsive Design**: Works well on desktop and mobile devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server with API routes\n│ └── README.md # Backend documentation\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend application\n│ ├── components/\n│ │ └── App.tsx # Main app component\n│ └── README.md # Frontend documentation\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── README.md # Shared utilities documentation\n└── README.md # This file\n```\n\n## Setup Instructions\n\n1. **Environment Variables**: Set up your OpenAI API key in Val Town environment variables:\n - Go to your Val Town settings\n - Add environment variable: `OPENAI_API_KEY` with your OpenAI API key\n\n2. **Deploy**: The app will automatically deploy when you save the files in Val Town\n\n3. **Access**: Your app will be available at your Val Town HTTP endpoint\n\n## API Endpoints\n\n- `GET /` - Serves the main application\n- `POST /api/summarize` - Summarizes text or URL content\n- `GET /frontend/*` - Serves frontend assets\n- `GET /shared/*` - Serves shared utilities\n\n## Usage\n\n1. Open the application in your browser\n2. Paste either:\n - A URL to an article you want summarized\n - The full text of an article\n3. Click \"Summarize\" button\n4. View the 1-3 sentence summary generated by AI\n\n## Error Handling\n\nThe app handles various error scenarios:\n- Invalid or unreachable URLs\n- OpenAI API failures or rate limits\n- Network connectivity issues\n- Malformed input data",[],[172],"files",[151,170,180,191,198,205,216,224,232,242,249,257,266,272],"counts",{"_283":32,"_284":119,"_285":32,"_286":32},"pulls","branches","forks","envVars","contents",[],{"_103":267,"_157":139,"_154":268,"_95":99,"_165":-5,"_163":164,"_100":119,"_156":-5,"_105":290,"_158":138,"_167":-5,"_98":291},["D",1748857757417],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":300,"_149":305,"_279":348,"_176":349,"_287":352,"_353":-5,"_354":22,"_355":-5,"_356":-5,"_357":-5,"_358":359},{"_103":104,"_95":96,"_105":301,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":302,"_133":303,"_136":304,"_148":22},["D",1748852086159],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[306,315,333,342,345],{"_103":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_105":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":307,"_98":314},[308,311],{"_103":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":174,"_160":161,"_105":175,"_100":32,"_163":176,"_165":177,"_166":22,"_167":-5,"_168":309,"_98":310},[],[153,172],{"_103":181,"_95":182,"_154":183,"_156":155,"_157":139,"_158":184,"_160":161,"_105":185,"_100":174,"_163":186,"_165":187,"_166":22,"_167":-5,"_168":312,"_98":313},[],[153,182],[153],{"_103":192,"_95":193,"_154":194,"_156":-5,"_157":139,"_158":195,"_160":161,"_105":196,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":316,"_98":332},[317,323,326,329],{"_103":199,"_95":200,"_154":201,"_156":194,"_157":139,"_158":202,"_160":161,"_105":203,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":318,"_98":322},[319],{"_103":206,"_95":207,"_154":208,"_156":201,"_157":139,"_158":184,"_160":161,"_105":209,"_100":210,"_163":211,"_165":212,"_166":22,"_167":-5,"_168":320,"_98":321},[],[193,200,207],[193,200],{"_103":217,"_95":172,"_154":218,"_156":194,"_157":139,"_158":219,"_160":161,"_105":220,"_100":32,"_163":176,"_165":221,"_166":22,"_167":-5,"_168":324,"_98":325},[],[193,172],{"_103":225,"_95":226,"_154":227,"_156":194,"_157":139,"_158":195,"_160":161,"_105":228,"_100":32,"_163":176,"_165":229,"_166":22,"_167":-5,"_168":327,"_98":328},[],[193,226],{"_103":233,"_95":234,"_154":235,"_156":194,"_157":139,"_158":236,"_160":161,"_105":237,"_100":32,"_163":211,"_165":238,"_166":22,"_167":-5,"_168":330,"_98":331},[],[193,234],[193],{"_103":243,"_95":244,"_154":245,"_156":-5,"_157":139,"_158":246,"_160":161,"_105":247,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":334,"_98":341},[335,338],{"_103":250,"_95":172,"_154":251,"_156":245,"_157":139,"_158":252,"_160":161,"_105":253,"_100":32,"_163":176,"_165":254,"_166":22,"_167":-5,"_168":336,"_98":337},[],[244,172],{"_103":258,"_95":259,"_154":260,"_156":245,"_157":139,"_158":184,"_160":161,"_105":261,"_100":246,"_163":211,"_165":262,"_166":22,"_167":-5,"_168":339,"_98":340},[],[244,259],[244],{"_103":267,"_95":99,"_154":268,"_156":-5,"_157":139,"_158":138,"_160":161,"_105":269,"_100":119,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":343,"_98":344},[],[99],{"_103":273,"_95":172,"_154":274,"_156":-5,"_157":139,"_158":184,"_160":161,"_105":275,"_100":252,"_163":176,"_165":276,"_166":22,"_167":-5,"_168":346,"_98":347},[],[172],[306,308,311,315,317,319,323,326,329,333,335,338,342,345],{"_103":267,"_157":139,"_154":268,"_95":99,"_165":-5,"_163":164,"_100":119,"_156":-5,"_105":350,"_158":138,"_167":-5,"_98":351},["D",1748857757417],[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]