AI Tools Directory - Discover Amazing AI Tools

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_326":327,"_328":329},"routes/_app.x.$handle.$name",{"_96":95,"_32":46,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",30,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","299f452c-4430-11f0-b0ae-76b3cceeab13","name","index.ts","fileType","http","content","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createTables, seedData } from \"./database/migrations.ts\";\nimport { getAllTools, getToolStats } from \"./database/queries.ts\";\nimport { CATEGORIES } from \"../shared/types.ts\";\nimport toolsRouter from \"./routes/tools.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database on startup\ntry {\n await createTables();\n await seedData();\n console.log('✅ Database initialized successfully');\n} catch (error) {\n console.error('❌ Database initialization failed:', error);\n}\n\n// API Routes\napp.route(\"/api/tools\", toolsRouter);\n\n// Manual database seeding endpoint (for testing)\napp.get(\"/api/seed\", async c => {\n try {\n await createTables();\n await seedData();\n const stats = await getToolStats();\n return c.json({ \n success: true, \n message: \"Database seeded successfully\",\n stats \n });\n } catch (error) {\n console.error(\"Seeding error:\", error);\n return c.json({ \n success: false, \n error: error.message \n }, 500);\n }\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page with initial data injection\napp.get(\"/\", async c => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data to avoid extra round-trips\n try {\n const [featuredTools, stats] = await Promise.all([\n getAllTools(),\n getToolStats()\n ]);\n\n const initialData = {\n tools: featuredTools,\n categories: CATEGORIES,\n stats\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n } catch (dbError) {\n console.error(\"Database error, serving without initial data:\", dbError);\n // Serve with empty initial data if database fails\n const initialData = {\n tools: [],\n categories: CATEGORIES,\n stats: { total: 0, featured: 0, byCategory: {} }\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n }\n\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.text(\"Error loading page\", 500);\n }\n});\n\n// Health check\napp.get(\"/health\", c => {\n return c.json({ status: \"healthy\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createTables, seedData } from \"./database/migrations.ts\";\nimport { getAllTools, getToolStats } from \"./database/queries.ts\";\nimport { CATEGORIES } from \"../shared/types.ts\";\nimport toolsRouter from \"./routes/tools.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database on startup\ntry {\n await createTables();\n await seedData();\n console.log('✅ Database initialized successfully');\n} catch (error) {\n console.error('❌ Database initialization failed:', error);\n}\n\n// API Routes\napp.route(\"/api/tools\", toolsRouter);\n\n// Manual database seeding endpoint (for testing)\napp.get(\"/api/seed\", async c => {\n try {\n console.log('🔧 Starting manual seed...');\n await createTables();\n console.log('✅ Tables created');\n \n // Try inserting one tool manually first\n const testTool = {\n name: 'ChatGPT',\n description: 'Advanced conversational AI for writing, coding, analysis, and creative tasks',\n category: 'text-ai',\n url: 'https://chat.openai.com',\n tags: JSON.stringify(['conversation', 'writing', 'coding', 'analysis']),\n pricing: 'freemium',\n featured: true,\n rating: 4.8\n };\n \n const result = await sqlite.execute(\n `INSERT INTO ai_tools_v2 (name, description, category, url, tags, pricing, featured, rating)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n [testTool.name, testTool.description, testTool.category, testTool.url, testTool.tags, testTool.pricing, testTool.featured, testTool.rating]\n );\n \n console.log('✅ Test tool inserted:', result);\n \n await seedData();\n console.log('✅ Seed data completed');\n \n const stats = await getToolStats();\n console.log('📊 Final stats:', stats);\n \n return c.json({ \n success: true, \n message: \"Database seeded successfully\",\n stats,\n testResult: result\n });\n } catch (error) {\n console.error(\"Seeding error:\", error);\n return c.json({ \n success: false, \n error: error.message,\n stack: error.stack\n }, 500);\n }\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page with initial data injection\napp.get(\"/\", async c => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data to avoid extra round-trips\n try {\n const [featuredTools, stats] = await Promise.all([\n getAllTools(),\n getToolStats()\n ]);\n\n const initialData = {\n tools: featuredTools,\n categories: CATEGORIES,\n stats\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n } catch (dbError) {\n console.error(\"Database error, serving without initial data:\", dbError);\n // Serve with empty initial data if database fails\n const initialData = {\n tools: [],\n categories: CATEGORIES,\n stats: { total: 0, featured: 0, byCategory: {} }\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n }\n\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.text(\"Error loading page\", 500);\n }\n});\n\n// Health check\napp.get(\"/health\", c => {\n return c.json({ status: \"healthy\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals","createdAt",["D",1749363717421],"branchVersion","branchId","a080dd64-442f-11f0-9005-76b3cceeab13","id","a08071e4-442f-11f0-9005-76b3cceeab13","untitled-9921",["D",1749363179537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","cd7bd560-442c-11f0-9348-b5586772b2fb","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","35b54dee-ade2-446d-b3bf-dabff6757df5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"isOwned",39,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","DevGoku","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5REd1bmdlVHpSaU85R1oyTGR0SVFvUGtLSSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":322,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":323,"_80":324,"_82":325,"_84":25},"tree",[177,184,193,195,196],"files",[177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196],"counts",{"_167":62,"_168":135,"_169":62,"_170":171,"_172":173},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":161,"_32":162,"_30":163,"_134":-5,"_42":43,"_41":164,"_136":58,"_39":165,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":166},{"_44":155,"_32":156,"_30":157,"_134":-5,"_42":43,"_41":158,"_136":58,"_39":159,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":160},{"_44":148,"_32":149,"_30":150,"_134":-5,"_42":43,"_41":151,"_136":58,"_39":152,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":154},{"_44":141,"_32":142,"_30":143,"_134":-5,"_42":43,"_41":144,"_136":25,"_39":145,"_13":62,"_34":20,"_36":146,"_24":25,"_139":-5,"_27":147},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":58,"_39":137,"_13":62,"_34":138,"_36":105,"_24":25,"_139":-5,"_27":140},"a0834806-442f-11f0-9005-76b3cceeab13","main.tsx","a08348a6-442f-11f0-9005-76b3cceeab13","parentId",1,"latest",["D",1749363179552],"script","label",[132],"fd35c524-442f-11f0-93cf-76b3cceeab13","README.md","fd35c5e2-442f-11f0-93cf-76b3cceeab13",2,["D",1749363335072],"# AI Tools Directory\n\nA comprehensive, beautifully designed directory of AI tools with a sleek black and icy aesthetic featuring 3D graphics.\n\n## Features\n\n- 🔍 **Smart Search**: Find AI tools by name, category, or functionality\n- 🎨 **Categories**: Video Gen, Image Gen, Text AI, Audio AI, Code AI, and more\n- 🌟 **3D Interface**: Immersive black and icy theme with floating elements\n- ⚡ **Fast Discovery**: Instantly browse and discover new AI tools\n- 📱 **Responsive**: Works perfectly on all devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema and initial data\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ └── tools.ts # API routes for tools\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application\n│ │ ├── ToolCard.tsx # Individual tool display\n│ │ ├── SearchBar.tsx # Search functionality\n│ │ ├── CategoryFilter.tsx # Category filtering\n│ │ └── Scene3D.tsx # 3D background effects\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React entry point\n│ └── style.css # Custom styling\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: Hono + SQLite\n- **Frontend**: React 18 + Three.js for 3D effects\n- **Styling**: TailwindCSS + Custom CSS\n- **Database**: SQLite with comprehensive AI tools data\n\n## Getting Started\n\nThe main entry point is `backend/index.ts` which serves both the API and frontend.",[142],"02f3a2b0-4430-11f0-a82e-76b3cceeab13","shared","2f5bc2f0-7b51-4518-be5d-f6af01f93733",3,["D",1749363344704],"directory",[149],"467dc9fc-4430-11f0-857c-76b3cceeab13","frontend","a6b57135-d1c2-4a2c-98cf-1dbd71dedf35",8,["D",1749363458017],[156],"1528818a-4430-11f0-8bf1-76b3cceeab13","backend","c001d08a-777b-408c-a2d9-50520bfd7df1",4,["D",1749363375248],[162],"pulls","branches","forks","envVars",{"_174":62,"_176":62},"connections",{"_174":62,"_175":62},"count","unfilledCount","emptyCount",{"_44":161,"_32":162,"_30":163,"_134":-5,"_42":43,"_41":164,"_136":58,"_39":319,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":320,"_27":321},{"_44":315,"_32":306,"_30":299,"_134":163,"_42":43,"_41":164,"_136":58,"_39":316,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":317,"_27":318},{"_44":307,"_32":308,"_30":309,"_134":299,"_42":43,"_41":310,"_136":25,"_39":311,"_13":302,"_34":138,"_36":312,"_24":25,"_139":-5,"_198":313,"_27":314},{"_44":296,"_32":297,"_30":298,"_134":299,"_42":43,"_41":300,"_136":25,"_39":301,"_13":302,"_34":138,"_36":303,"_24":25,"_139":-5,"_198":304,"_27":305},{"_44":292,"_32":291,"_30":286,"_134":163,"_42":43,"_41":280,"_136":58,"_39":293,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":294,"_27":295},{"_44":283,"_32":284,"_30":285,"_134":286,"_42":43,"_41":280,"_136":25,"_39":287,"_13":62,"_34":138,"_36":288,"_24":25,"_139":-5,"_198":289,"_27":290},{"_44":278,"_32":33,"_30":31,"_134":163,"_42":43,"_41":14,"_136":25,"_39":279,"_13":280,"_34":35,"_36":38,"_24":25,"_139":-5,"_198":281,"_27":282},{"_44":155,"_32":156,"_30":157,"_134":-5,"_42":43,"_41":158,"_136":58,"_39":275,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":276,"_27":277},{"_44":271,"_32":238,"_30":232,"_134":157,"_42":43,"_41":250,"_136":58,"_39":272,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":273,"_27":274},{"_44":263,"_32":264,"_30":265,"_134":232,"_42":43,"_41":266,"_136":58,"_39":267,"_13":62,"_34":138,"_36":268,"_24":25,"_139":-5,"_198":269,"_27":270},{"_44":255,"_32":256,"_30":257,"_134":232,"_42":43,"_41":258,"_136":58,"_39":259,"_13":62,"_34":138,"_36":260,"_24":25,"_139":-5,"_198":261,"_27":262},{"_44":247,"_32":248,"_30":249,"_134":232,"_42":43,"_41":250,"_136":58,"_39":251,"_13":62,"_34":138,"_36":252,"_24":25,"_139":-5,"_198":253,"_27":254},{"_44":239,"_32":240,"_30":241,"_134":232,"_42":43,"_41":242,"_136":58,"_39":243,"_13":62,"_34":138,"_36":244,"_24":25,"_139":-5,"_198":245,"_27":246},{"_44":229,"_32":230,"_30":231,"_134":232,"_42":43,"_41":233,"_136":58,"_39":234,"_13":62,"_34":138,"_36":235,"_24":25,"_139":-5,"_198":236,"_27":237},{"_44":222,"_32":223,"_30":224,"_134":157,"_42":43,"_41":158,"_136":58,"_39":225,"_13":62,"_34":20,"_36":226,"_24":25,"_139":-5,"_198":227,"_27":228},{"_44":214,"_32":215,"_30":216,"_134":157,"_42":43,"_41":217,"_136":58,"_39":218,"_13":62,"_34":138,"_36":219,"_24":25,"_139":-5,"_198":220,"_27":221},{"_44":148,"_32":149,"_30":150,"_134":-5,"_42":43,"_41":151,"_136":58,"_39":211,"_13":62,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":212,"_27":213},{"_44":204,"_32":205,"_30":206,"_134":150,"_42":43,"_41":151,"_136":58,"_39":207,"_13":62,"_34":138,"_36":208,"_24":25,"_139":-5,"_198":209,"_27":210},{"_44":141,"_32":142,"_30":143,"_134":-5,"_42":43,"_41":144,"_136":25,"_39":201,"_13":62,"_34":20,"_36":146,"_24":25,"_139":-5,"_198":202,"_27":203},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":58,"_39":197,"_13":62,"_34":138,"_36":105,"_24":25,"_139":-5,"_198":199,"_27":200},["D",1749363179552],"children",[],[132],["D",1749363335072],[],[142],"02f3928e-4430-11f0-a82e-76b3cceeab13","types.ts","02f39360-4430-11f0-a82e-76b3cceeab13",["D",1749363344704],"// Shared types for the AI Tools Directory\n\nexport interface AITool {\n id: number;\n name: string;\n description: string;\n category: string;\n url: string;\n tags: string[];\n pricing: 'free' | 'freemium' | 'paid';\n featured: boolean;\n rating?: number;\n createdAt: string;\n}\n\nexport interface Category {\n id: string;\n name: string;\n description: string;\n icon: string;\n color: string;\n}\n\nexport interface SearchFilters {\n query?: string;\n category?: string;\n pricing?: string;\n featured?: boolean;\n}\n\nexport const CATEGORIES: Category[] = [\n {\n id: 'video-gen',\n name: 'Video Generation',\n description: 'AI tools for creating and editing videos',\n icon: '🎬',\n color: '#8B5CF6'\n },\n {\n id: 'image-gen',\n name: 'Image Generation',\n description: 'AI tools for creating and editing images',\n icon: '🎨',\n color: '#06B6D4'\n },\n {\n id: 'text-ai',\n name: 'Text & Writing',\n description: 'AI tools for writing, editing, and content creation',\n icon: '✍️',\n color: '#10B981'\n },\n {\n id: 'audio-ai',\n name: 'Audio & Music',\n description: 'AI tools for audio generation and music creation',\n icon: '🎵',\n color: '#F59E0B'\n },\n {\n id: 'code-ai',\n name: 'Code & Development',\n description: 'AI tools for coding and software development',\n icon: '💻',\n color: '#EF4444'\n },\n {\n id: 'chat-ai',\n name: 'Chat & Assistants',\n description: 'AI chatbots and virtual assistants',\n icon: '💬',\n color: '#8B5CF6'\n },\n {\n id: 'design-ai',\n name: 'Design & UI',\n description: 'AI tools for design and user interface creation',\n icon: '🎯',\n color: '#EC4899'\n },\n {\n id: 'data-ai',\n name: 'Data & Analytics',\n description: 'AI tools for data analysis and insights',\n icon: '📊',\n color: '#6366F1'\n }\n];",[],[149,205],["D",1749363344704],[194],[149],"85977e62-4430-11f0-9996-76b3cceeab13","index.tsx","85977f0c-4430-11f0-9996-76b3cceeab13",14,["D",1749363563878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[156,215],"467db5c0-4430-11f0-857c-76b3cceeab13","index.html","467db674-4430-11f0-857c-76b3cceeab13",["D",1749363458017],"\n\n\n \n \n AI Tools Directory - Discover Amazing AI Tools\n \n \n \n 🤖\">\n \n \n \n \n \n \n \n \n \n \n \n\n\n \n

\n \n \n

\n \n \n \n\n",[],[156,223],"6f7083fe-4430-11f0-a36e-76b3cceeab13","ToolCard.tsx","6f7084d0-4430-11f0-a36e-76b3cceeab13","69c171a6-4f75-4ddf-b5ac-27cdc056baf7",12,["D",1749363526719],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { AITool, Category } from \"../../shared/types.ts\";\n\ninterface ToolCardProps {\n tool: AITool;\n categories: Category[];\n}\n\nexport default function ToolCard({ tool, categories }: ToolCardProps) {\n const category = categories.find(c => c.id === tool.category);\n \n const getPricingBadgeClass = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'pricing-free';\n case 'freemium': return 'pricing-freemium';\n case 'paid': return 'pricing-paid';\n default: return 'bg-gray-600';\n }\n };\n\n const getPricingText = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'Free';\n case 'freemium': return 'Freemium';\n case 'paid': return 'Paid';\n default: return pricing;\n }\n };\n\n const renderStars = (rating?: number) => {\n if (!rating) return null;\n \n const stars = [];\n const fullStars = Math.floor(rating);\n const hasHalfStar = rating % 1 >= 0.5;\n \n for (let i = 0; i < 5; i++) {\n if (i < fullStars) {\n stars.push(\n ★\n );\n } else if (i === fullStars && hasHalfStar) {\n stars.push(\n ☆\n );\n } else {\n stars.push(\n ☆\n );\n }\n }\n \n return (\n

{stars}

\n {rating.toFixed(1)}\n

\n );\n };\n\n return (\n

\n {/* Featured Badge */}\n {tool.featured && (\n

\n ⭐ Featured\n

\n )}\n\n {/* Category Icon & Name */}\n

\n {category && (\n <>\n {category.icon}\n \n {category.name}\n \n \n )}\n

\n \n {/* Pricing Badge */}\n

\n {getPricingText(tool.pricing)}\n

\n\n {/* Tool Name */}\n

\n {tool.name}\n

\n\n {/* Description */}\n

\n {tool.description}\n

\n\n {/* Tags */}\n {tool.tags && tool.tags.length > 0 && (\n

\n {tool.tags.slice(0, 3).map((tag, index) => (\n \n #{tag}\n \n ))}\n {tool.tags.length > 3 && (\n \n +{tool.tags.length - 3} more\n \n )}\n

\n )}\n\n {/* Rating */}\n {tool.rating && (\n

\n {renderStars(tool.rating)}\n

\n )}\n\n {/* Action Button */}\n

\n \n Try Now\n \n \n\n {/* Share Button */}\n {\n if (navigator.share) {\n navigator.share({\n title: tool.name,\n text: tool.description,\n url: tool.url\n });\n } else {\n navigator.clipboard.writeText(tool.url);\n // Could add a toast notification here\n }\n }}\n className=\"p-2 text-gray-400 hover:text-white transition-colors\"\n title=\"Share this tool\"\n >\n \n \n

\n );\n}",[],[156,238,230],"components","594a31ba-4430-11f0-930e-76b3cceeab13","SearchBar.tsx","594a3278-4430-11f0-930e-76b3cceeab13",10,["D",1749363489559],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface SearchBarProps {\n onSearch: (query: string) => void;\n placeholder?: string;\n}\n\nexport default function SearchBar({ onSearch, placeholder = \"Search AI tools...\" }: SearchBarProps) {\n const [query, setQuery] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSearch(query);\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const value = e.target.value;\n setQuery(value);\n // Real-time search with debouncing\n setTimeout(() => {\n if (value === query) {\n onSearch(value);\n }\n }, 300);\n };\n\n return (\n \n );\n}",[],[156,238,240],"52a583c8-4430-11f0-bcbe-76b3cceeab13","Scene3D.tsx","52a5849a-4430-11f0-bcbe-76b3cceeab13",9,["D",1749363478408],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ndeclare global {\n interface Window {\n THREE: any;\n }\n}\n\nexport default function Scene3D() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || !window.THREE) return;\n\n const canvas = canvasRef.current;\n const scene = new window.THREE.Scene();\n const camera = new window.THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n const renderer = new window.THREE.WebGLRenderer({ canvas, alpha: true });\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n\n // Create floating ice crystals\n const crystalGeometry = new window.THREE.OctahedronGeometry(0.5, 0);\n const crystalMaterial = new window.THREE.MeshBasicMaterial({\n color: 0x00d4ff,\n transparent: true,\n opacity: 0.6,\n wireframe: true\n });\n\n const crystals: any[] = [];\n for (let i = 0; i < 50; i++) {\n const crystal = new window.THREE.Mesh(crystalGeometry, crystalMaterial);\n crystal.position.x = (Math.random() - 0.5) * 100;\n crystal.position.y = (Math.random() - 0.5) * 100;\n crystal.position.z = (Math.random() - 0.5) * 100;\n crystal.rotation.x = Math.random() * Math.PI;\n crystal.rotation.y = Math.random() * Math.PI;\n crystal.userData = {\n rotationSpeed: {\n x: (Math.random() - 0.5) * 0.02,\n y: (Math.random() - 0.5) * 0.02,\n z: (Math.random() - 0.5) * 0.02\n },\n floatSpeed: Math.random() * 0.01 + 0.005\n };\n scene.add(crystal);\n crystals.push(crystal);\n }\n\n // Create particle system\n const particleCount = 200;\n const particles = new window.THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const colors = new Float32Array(particleCount * 3);\n\n for (let i = 0; i < particleCount * 3; i += 3) {\n positions[i] = (Math.random() - 0.5) * 200;\n positions[i + 1] = (Math.random() - 0.5) * 200;\n positions[i + 2] = (Math.random() - 0.5) * 200;\n\n // Ice blue colors\n colors[i] = 0; // R\n colors[i + 1] = 0.8 + Math.random() * 0.2; // G\n colors[i + 2] = 1; // B\n }\n\n particles.setAttribute('position', new window.THREE.BufferAttribute(positions, 3));\n particles.setAttribute('color', new window.THREE.BufferAttribute(colors, 3));\n\n const particleMaterial = new window.THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n transparent: true,\n opacity: 0.8\n });\n\n const particleSystem = new window.THREE.Points(particles, particleMaterial);\n scene.add(particleSystem);\n\n camera.position.z = 30;\n\n // Animation loop\n let animationId: number;\n const animate = () => {\n animationId = requestAnimationFrame(animate);\n\n // Rotate crystals\n crystals.forEach(crystal => {\n crystal.rotation.x += crystal.userData.rotationSpeed.x;\n crystal.rotation.y += crystal.userData.rotationSpeed.y;\n crystal.rotation.z += crystal.userData.rotationSpeed.z;\n \n // Floating motion\n crystal.position.y += Math.sin(Date.now() * crystal.userData.floatSpeed) * 0.01;\n });\n\n // Rotate particle system\n particleSystem.rotation.y += 0.001;\n particleSystem.rotation.x += 0.0005;\n\n // Camera movement based on mouse (if mouse position is available)\n const time = Date.now() * 0.0005;\n camera.position.x = Math.cos(time) * 5;\n camera.position.y = Math.sin(time * 0.7) * 3;\n camera.lookAt(0, 0, 0);\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n // Handle window resize\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n // Mouse interaction\n const handleMouseMove = (event: MouseEvent) => {\n const mouseX = (event.clientX / window.innerWidth) * 2 - 1;\n const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;\n \n camera.position.x += (mouseX * 10 - camera.position.x) * 0.05;\n camera.position.y += (mouseY * 10 - camera.position.y) * 0.05;\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n // Cleanup\n return () => {\n cancelAnimationFrame(animationId);\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('mousemove', handleMouseMove);\n renderer.dispose();\n };\n }, []);\n\n return

\n {tool.name}\n

\n 🏷️\n Categories\n

{category.name}

\n AI Tools Directory\n

No tools found

Diff · v30