Tap4 AI WebUI: 开源轻量级AI工具导航项目

Ray

Tap4 AI WebUI:打造你自己的AI工具导航网站

在当今快速发展的AI时代,各种AI工具层出不穷。如何高效地收集、整理和分享这些AI工具,成为了许多AI爱好者和开发者面临的一个挑战。Tap4 AI WebUI项目应运而生,它是一个开源的轻量级AI工具导航网站解决方案,旨在帮助每个人都能轻松搭建自己的AI工具目录。

项目背景与目标

Tap4 AI WebUI项目源自Tap4 AI Tool Directory。该项目的主要目标是:

让每个人都能轻松拥有自己的AI工具导航网站
帮助用户收集和整理自己喜欢的AI工具产品
为个人开发者和NextJS学习者提供一个轻量级、易维护的项目

项目采用开源模式,欢迎所有人fork和star,共同参与到这个充满创意的AI导航项目中来。

主要特性

Tap4 AI WebUI项目具有以下核心特性:

AI工具列表展示: 支持展示丰富的AI工具信息
分类筛选: 支持按类别浏览AI工具
搜索功能: 提供AI工具搜索功能
详情展示: 支持展示AI工具的Markdown格式详细介绍
SEO友好: 支持多语言的SEO优化

技术栈概述

项目采用了以下技术栈:

NEXT 14: 使用最新的Next.js框架,采用app路由(React服务器组件)
Supabase: 采用Supabase无服务器数据库存储数据
国际化: 支持多语言
动态站点地图: 支持多语言的动态sitemap.xml生成
Tailwind CSS: 使用Tailwind CSS进行样式设计

Tap4 AI WebUI前端页面截图

部署指南

1. 部署Tap4 AI Crawler

首先需要部署Tap4 AI Crawler项目。部署完成后,你可以使用平台域名或自定义域名作为生成AI工具网页内容的API接口。

2. 创建Supabase数据库并执行SQL脚本

在Supabase注册并创建数据库
记录SUPABASE_URL和SUPABASE_ANON_KEY,用于后续Vercel环境变量配置
在Supabase后台执行项目db目录中的SQL文件:create_table.sql、insert_category_data.sql、insert_data.sql

3. 在Vercel上部署

点击上方按钮,按照提示进行部署。注意:不要忘记设置环境变量!

环境变量配置示例:

# 你的域名
NEXT_PUBLIC_SITE_URL="https://tap4.ai"

# Google跟踪ID和广告URL
GOOGLE_TRACKING_ID="G-XXXXXXX" 
GOOGLE_ADSENSE_URL="https://xxxx.googlesyndication.com/xxxxx/xxxxx"

# 底部联系邮箱
CONTACT_US_EMAIL="contact@tap4.ai"

# Supabase数据库URL和密钥
NEXT_PUBLIC_SUPABASE_URL="https://xxxyyyzzz.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="XXX.YYY.ZZZ"

# 网页爬虫API接口
CRAWLER_API="https://{crawler_domain}/site/crawl_async"

# 爬虫接口验证密钥
CRAWLER_API_KEY="xxxx"

# 自定义接口验证密钥
CRON_AUTH_KEY="keyxxxx"

# 提交API验证密钥
SUBMIT_AUTH_KEY="xxxx"

本地运行

如果你想在本地运行项目进行开发或测试,可以按以下步骤操作:

克隆项目:

git clone https://github.com/6677-ai/tap4-ai-webui.git

安装依赖:
- Node
- NVM
- PNPM
设置环境变量: 在根目录创建.env.local文件,填入相应的环境变量值
运行开发模式:
```
pnpm dev
```

内容更新

手动修改数据库: 直接修改Supabase中的web_navigation表数据
爬虫自动更新: 如果爬虫失败,可以手动查询submit表,然后创建相关网站内容并插入web_navigation表

参与贡献

我们欢迎并鼓励社区成员参与到Tap4 AI WebUI项目的开发中来。以下是一些参与方式:

在GitHub上Star和Fork项目
提交Issue反馈问题或建议新功能
提交Pull Request贡献代码
帮助完善文档和翻译

如果你对项目感兴趣,可以加入我们的WeChat群组(联系方式:helloleo2023,备注"tap4 ai open source")进行交流。

结语

Tap4 AI WebUI项目为AI爱好者和开发者提供了一个轻量级、易于定制的AI工具导航解决方案。无论你是想搭建自己的AI工具收藏网站,还是学习Next.js和Supabase的应用,这个项目都是一个很好的选择。让我们携手共同推动AI工具生态的发展,为更多人带来AI的便利与创新。