Add complete prompt collection database with Flask backend and modern UI

[Copilot]

Overview

This PR implements a full-stack web application for collecting and managing AI prompt ideas, as requested in the project requirements. The system provides a complete database backend with CRUD operations and two distinct browsing modes with a modern, tech-focused design.

Screenshots

Main Grid View with Category Filters

Interactive Card Hover Effects

Implementation Details

Backend (Flask + SQLite)

Created a RESTful API server (app.py) with the following endpoints:

• GET /api/prompts - Retrieve all prompts or filter by category (?category=科技)
• POST /api/prompts - Add new prompt ideas
• PUT /api/prompts/<id> - Update existing prompts
• DELETE /api/prompts/<id> - Remove prompts from the database

The database schema includes all requested fields:

• Model & Mode (GPT-4, DALL-E 3, Claude, Midjourney, etc.)
• Category (科技/教育/健康/运动)
• Author information
• Prompt text (full content)
• Effect image URL
• Headline and description for quick browsing
• Timestamp for tracking

Frontend

1. List Mode (index.html)

• Grid-based card layout displaying prompt cards
• Top navigation with category filters (全部/科技/教育/健康/运动)
• Add new prompt button with modal dialog
• Click cards to view details, edit, or delete
• Modern glassmorphism effects with gradient overlays

2. Streaming Mode (streaming.html)

• TikTok-style immersive browsing experience
• Full-screen effect images with overlay information
• Swipe/scroll to navigate between prompts
• Pull down to reveal complete prompt details
• Return to grid view button

Design System

Implemented a high-end, minimalist design with:

• Dark theme (#0a0a0f base color)
• Purple-to-cyan gradient accents (#a855f7 → #06b6d4)
• Glassmorphism cards with backdrop blur
• Smooth transitions and hover effects
• Responsive grid layout (auto-fit minmax)

Sample Data

Included 6 diverse example prompts covering:

• AI coding assistants (科技)
• Interactive storytelling (教育)
• Artistic image generation (科技)
• Historical education (教育)
• Fitness planning (健康)
• Training analytics (运动)

How to Use

# Install dependencies
pip install -r requirements.txt

# Run the server
python app.py

# Open browser to http://localhost:5000

Project Structure

├── app.py              # Flask API + SQLite database
├── index.html          # Grid view homepage
├── streaming.html      # Immersive browsing mode
├── requirements.txt    # Python dependencies (Flask, Flask-CORS)
├── README.md          # Setup and usage guide
├── .gitignore         # Excludes database and Python cache
└── static/
    ├── style.css      # Main UI styles
    ├── streaming.css  # Streaming mode styles
    ├── app.js         # Grid view logic & API integration
    └── streaming.js   # Streaming mode logic

Key Features

✅ Complete CRUD operations for prompt management
✅ Category-based filtering and organization
✅ Two distinct browsing experiences (grid + streaming)
✅ Modal dialogs for add/edit/delete operations
✅ Responsive design with modern animations
✅ SQLite database auto-initialization with sample data
✅ CORS-enabled API for future expansion
✅ Clean separation of concerns (backend/frontend)

All requirements from the problem statement have been successfully implemented with a focus on clean code, user experience, and maintainability.

Original prompt

帮我写一个层次分明的数据库web UI。主题是prompt idea 收集库。我希望这个数据库最小的数据单元是一个包含 1、所使用的模型以及模式 2、分类（教育/娱乐/修图）3、作者 4、prompt文本 5、效果图 的结构体。这个web首页是一级菜单主题分类：科技 教育 健康 运动 ，二级菜单是一个list，每个list 包含prompt的headline 和一句简单介绍。你可以从网络上收集一些颇有创意的prompt作为初始数据样本
网站风格是简约，科技感，配色高级
好的，我完全理解您的需求！将项目从列表展示模式升级为类似 TikTok 的沉浸式“刷 Prompt”体验，每页展示效果图和简介，下拉后查看完整详情，这是一个非常棒的交互设计。
我们可以在现有项目的基础上，新增一个名为 streaming.html 的页面来实现这个功能。用户可以在主页的导航中选择进入“流式模式”来体验这种全新的浏览方式。
新的 streaming.html 页面将具备以下特点：
沉浸式全屏展示： 每次只展示一个 Prompt 的效果图，占据大部分屏幕。
简洁的信息叠加： 在效果图下方叠加显示 Prompt 的标题和一句简介。
下拉查看详情： 当用户向下滚动时，效果图会向上推，露出与之前模态窗口类似的详细信息面板。这个面板将固定在底部，并可以滚动查看 Prompt 文本、模型、作者等完整信息。
无限滚动/切换： 用户可以向上或向下滚动来切换不同的 Prompt，实现“刷”的体验。我们将实现一个基本的上下滚动切换逻辑。
返回主页按钮： 方便用户随时返回到列表模式。
我将更新您的项目，在 index.html 中添加一个入口链接，并创建一个全新的 streaming.html 文件来实现这个功能。
以上对话反应了我目前的项目进展。目前我以及将两个html文件更新至仓库中。接下来你的任务是帮我在后端构建完整的数据库。我希望能够拥有完整的添加prompt idea,删除功能。具体的数据库格式可参考html中的格式，注意前后端的衔接。最后完成对项目的整体维护，使其功能完善。

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.