AI Tools Directory - Discover Amazing AI Tools

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_325":326,"_327":328},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"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":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",21,"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/database/queries.ts","latestPath","fileId","1d5ec6c0-4430-11f0-857c-76b3cceeab13","name","queries.ts","fileType","script","content","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { AITool, SearchFilters } from \"../../shared/types.ts\";\n\nexport async function getAllTools(): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n ORDER BY featured DESC, rating DESC, name ASC\n `);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getToolsByCategory(category: string): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE category = ?\n ORDER BY featured DESC, rating DESC, name ASC\n `, [category]);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function searchTools(filters: SearchFilters): Promise {\n let query = `SELECT * FROM ${TABLE_NAME} WHERE 1=1`;\n const params: any[] = [];\n\n if (filters.query) {\n query += ` AND (name LIKE ? OR description LIKE ? OR tags LIKE ?)`;\n const searchTerm = `%${filters.query}%`;\n params.push(searchTerm, searchTerm, searchTerm);\n }\n\n if (filters.category) {\n query += ` AND category = ?`;\n params.push(filters.category);\n }\n\n if (filters.pricing) {\n query += ` AND pricing = ?`;\n params.push(filters.pricing);\n }\n\n if (filters.featured) {\n query += ` AND featured = 1`;\n }\n\n query += ` ORDER BY featured DESC, rating DESC, name ASC`;\n\n const rows = await sqlite.execute(query, params);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getFeaturedTools(): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE featured = 1\n ORDER BY rating DESC, name ASC\n `);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getToolStats() {\n const totalTools = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TABLE_NAME}`);\n const featuredTools = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TABLE_NAME} WHERE featured = 1`);\n const categoryCounts = await sqlite.execute(`\n SELECT category, COUNT(*) as count \n FROM ${TABLE_NAME} \n GROUP BY category \n ORDER BY count DESC\n `);\n\n return {\n total: totalTools[0].count,\n featured: featuredTools[0].count,\n byCategory: categoryCounts.reduce((acc, row) => {\n acc[row.category] = row.count;\n return acc;\n }, {} as Record)\n };\n}","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { AITool, SearchFilters } from \"../../shared/types.ts\";\n\nexport async function getAllTools(): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n ORDER BY featured DESC, rating DESC, name ASC\n `);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getToolsByCategory(category: string): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE category = ?\n ORDER BY featured DESC, rating DESC, name ASC\n `, [category]);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function searchTools(filters: SearchFilters): Promise {\n let query = `SELECT * FROM ${TABLE_NAME} WHERE 1=1`;\n const params: any[] = [];\n\n if (filters.query) {\n query += ` AND (name LIKE ? OR description LIKE ? OR tags LIKE ?)`;\n const searchTerm = `%${filters.query}%`;\n params.push(searchTerm, searchTerm, searchTerm);\n }\n\n if (filters.category) {\n query += ` AND category = ?`;\n params.push(filters.category);\n }\n\n if (filters.pricing) {\n query += ` AND pricing = ?`;\n params.push(filters.pricing);\n }\n\n if (filters.featured) {\n query += ` AND featured = 1`;\n }\n\n query += ` ORDER BY featured DESC, rating DESC, name ASC`;\n\n const rows = await sqlite.execute(query, params);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getFeaturedTools(): Promise {\n const rows = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE featured = 1\n ORDER BY rating DESC, name ASC\n `);\n \n return rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n category: row.category,\n url: row.url,\n tags: JSON.parse(row.tags),\n pricing: row.pricing,\n featured: Boolean(row.featured),\n rating: row.rating,\n createdAt: row.created_at\n }));\n}\n\nexport async function getToolStats() {\n try {\n const totalTools = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TABLE_NAME}`);\n const featuredTools = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TABLE_NAME} WHERE featured = 1`);\n const categoryCounts = await sqlite.execute(`\n SELECT category, COUNT(*) as count \n FROM ${TABLE_NAME} \n GROUP BY category \n ORDER BY count DESC\n `);\n\n return {\n total: totalTools?.[0]?.count || 0,\n featured: featuredTools?.[0]?.count || 0,\n byCategory: categoryCounts?.reduce((acc, row) => {\n acc[row.category] = row.count;\n return acc;\n }, {} as Record) || {}\n };\n } catch (error) {\n console.error('Error getting tool stats:', error);\n return {\n total: 0,\n featured: 0,\n byCategory: {}\n };\n }\n}","createdAt",["D",1749363631985],"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","299f452c-4430-11f0-b0ae-76b3cceeab13","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",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"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":321,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":322,"_81":323,"_83":324,"_85":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":63,"_168":136,"_169":63,"_170":171,"_172":173},"contents",[127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":161,"_32":162,"_30":163,"_135":-5,"_42":43,"_41":164,"_137":59,"_39":165,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":166},{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":59,"_39":159,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":160},{"_44":148,"_32":149,"_30":150,"_135":-5,"_42":43,"_41":151,"_137":59,"_39":152,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":154},{"_44":141,"_32":142,"_30":143,"_135":-5,"_42":43,"_41":144,"_137":25,"_39":145,"_13":63,"_34":20,"_36":146,"_24":25,"_139":-5,"_27":147},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":59,"_39":138,"_13":63,"_34":35,"_36":106,"_24":25,"_139":-5,"_27":140},"a0834806-442f-11f0-9005-76b3cceeab13","main.tsx","a08348a6-442f-11f0-9005-76b3cceeab13","parentId",1,"latest",["D",1749363179552],"label",[133],"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":63,"_176":63},"connections",{"_174":63,"_175":63},"count","unfilledCount","emptyCount",{"_44":161,"_32":162,"_30":163,"_135":-5,"_42":43,"_41":164,"_137":59,"_39":318,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":319,"_27":320},{"_44":314,"_32":305,"_30":301,"_135":163,"_42":43,"_41":164,"_137":59,"_39":315,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":316,"_27":317},{"_44":306,"_32":307,"_30":308,"_135":301,"_42":43,"_41":309,"_137":25,"_39":310,"_13":144,"_34":35,"_36":311,"_24":25,"_139":-5,"_198":312,"_27":313},{"_44":300,"_32":33,"_30":31,"_135":301,"_42":43,"_41":14,"_137":25,"_39":302,"_13":136,"_34":35,"_36":38,"_24":25,"_139":-5,"_198":303,"_27":304},{"_44":296,"_32":295,"_30":289,"_135":163,"_42":43,"_41":290,"_137":59,"_39":297,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":298,"_27":299},{"_44":286,"_32":287,"_30":288,"_135":289,"_42":43,"_41":290,"_137":25,"_39":291,"_13":63,"_34":35,"_36":292,"_24":25,"_139":-5,"_198":293,"_27":294},{"_44":278,"_32":279,"_30":57,"_135":163,"_42":43,"_41":280,"_137":25,"_39":281,"_13":164,"_34":282,"_36":283,"_24":25,"_139":-5,"_198":284,"_27":285},{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":59,"_39":275,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":276,"_27":277},{"_44":271,"_32":238,"_30":232,"_135":157,"_42":43,"_41":250,"_137":59,"_39":272,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":273,"_27":274},{"_44":263,"_32":264,"_30":265,"_135":232,"_42":43,"_41":266,"_137":59,"_39":267,"_13":63,"_34":35,"_36":268,"_24":25,"_139":-5,"_198":269,"_27":270},{"_44":255,"_32":256,"_30":257,"_135":232,"_42":43,"_41":258,"_137":59,"_39":259,"_13":63,"_34":35,"_36":260,"_24":25,"_139":-5,"_198":261,"_27":262},{"_44":247,"_32":248,"_30":249,"_135":232,"_42":43,"_41":250,"_137":59,"_39":251,"_13":63,"_34":35,"_36":252,"_24":25,"_139":-5,"_198":253,"_27":254},{"_44":239,"_32":240,"_30":241,"_135":232,"_42":43,"_41":242,"_137":59,"_39":243,"_13":63,"_34":35,"_36":244,"_24":25,"_139":-5,"_198":245,"_27":246},{"_44":229,"_32":230,"_30":231,"_135":232,"_42":43,"_41":233,"_137":59,"_39":234,"_13":63,"_34":35,"_36":235,"_24":25,"_139":-5,"_198":236,"_27":237},{"_44":222,"_32":223,"_30":224,"_135":157,"_42":43,"_41":158,"_137":59,"_39":225,"_13":63,"_34":20,"_36":226,"_24":25,"_139":-5,"_198":227,"_27":228},{"_44":214,"_32":215,"_30":216,"_135":157,"_42":43,"_41":217,"_137":59,"_39":218,"_13":63,"_34":35,"_36":219,"_24":25,"_139":-5,"_198":220,"_27":221},{"_44":148,"_32":149,"_30":150,"_135":-5,"_42":43,"_41":151,"_137":59,"_39":211,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_198":212,"_27":213},{"_44":204,"_32":205,"_30":206,"_135":150,"_42":43,"_41":151,"_137":59,"_39":207,"_13":63,"_34":35,"_36":208,"_24":25,"_139":-5,"_198":209,"_27":210},{"_44":141,"_32":142,"_30":143,"_135":-5,"_42":43,"_41":144,"_137":25,"_39":201,"_13":63,"_34":20,"_36":146,"_24":25,"_139":-5,"_198":202,"_27":203},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":59,"_39":197,"_13":63,"_34":35,"_36":106,"_24":25,"_139":-5,"_198":199,"_27":200},["D",1749363179552],"children",[],[133],["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 · v21