ไธไธชๅบไบ Vue.js + FastAPI ็็ฐไปฃๅ AI ๅพๅๅค็ Web ๅบ็จ
่ฟๆฏไธไธช้ๆไบๅค็ง AI ่ฝๅ็ๅพๅๅค็ๅนณๅฐ๏ผๆไพไบไปๅบ็กๅพๅๆไฝๅฐ้ซ็บง AI ้ฃๆ ผ่ฝฌๆข็ๅ จๆนไฝ่งฃๅณๆนๆกใ้่ฟ็ฐไปฃๅ็ๅๅ็ซฏๅ็ฆปๆถๆ๏ผไธบ็จๆทๆไพๆต็ ็ๅพๅๅค็ไฝ้ชใ
- ๐ฏ ๅคๆ ทๅ AI ๅค็ๅจ๏ผๆฏๆLite.ai.Toolkitไธๅคง้จๅ็ฎๆณใๅฎซๅด้ช้ฃๆ ผ่ฝฌๆข็ญๅค็งๅพๅๅค็็ฎๆณ,ไปฅๅไธไบ ComfyUI ็ๆ่ถฃ็ๅทฅไฝๆต
- ๐ ๅฏๆฉๅฑๆถๆ๏ผๆไปถๅ็ๅค็ๅจ่ฎพ่ฎก๏ผ่ฝปๆพ้ๆ็ฌฌไธๆน AI API
- โก ๅผๆญฅๅค็๏ผๅบไบ FastAPI ็้ซๆง่ฝๅผๆญฅๅพๅๅค็
- ๐จ ็ฐไปฃๅ UI๏ผไฝฟ็จ Vue 3 + Composition API ๆๅปบ็ๅๅบๅผ็้ข
- ๐ก RESTful API๏ผๆ ๅๅ็ API ่ฎพ่ฎก๏ผๆฏๆ่ชๅจๆๆกฃ็ๆ
- ๐ก๏ธ ็ฑปๅๅฎๅ จ๏ผๅ็ซฏ TypeScript + ๅ็ซฏ Pydantic ๅ้็ฑปๅไฟ้
โโโโโโโโโโโโโโโโโโโ HTTP/WebSocket โโโโโโโโโโโโโโโโโโโ
โ Vue.js ๅ็ซฏ โ โโโโโโโโโโโโโโโโโโโโ โ FastAPI ๅ็ซฏ โ
โ โ โ โ
โ โข Composition APIโ โ โข ๅผๆญฅๅค็ โ
โ โข TypeScript โ โ โข Pydantic ้ช่ฏ โ
โ โข Vite ๆๅปบ โ โ โข SQLAlchemy ORMโ
โ โข Pinia ็ถๆ็ฎก็ โ โ โข AI ๅค็ๅจๆไปถ โ
โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโ
โ AI ๅค็ๅฑ โ
โ โ
โ โข OpenCV โ
โ โข PIL/Pillow โ
โ โข ๅค้จ AI API โ
โ โข ่ชๅฎไน็ฎๆณ โ
โโโโโโโโโโโโโโโโโโโ
my-app/
โโโ ๐ frontend/ # Vue.js ๅ็ซฏๅบ็จ
โ โโโ ๐ src/
โ โ โโโ ๐ components/ # ๅฏๅค็จ็ปไปถ
โ โ โโโ ๐ views/ # ้กต้ข่งๅพ
โ โ โโโ ๐ stores/ # Pinia ็ถๆ็ฎก็
โ โ โโโ ๐ types/ # TypeScript ็ฑปๅๅฎไน
โ โ โโโ ๐ utils/ # ๅทฅๅ
ทๅฝๆฐ
โ โ โโโ ๐ main.ts # ๅบ็จๅ
ฅๅฃ
โ โโโ ๐ package.json
โ โโโ ๐ vite.config.ts
โโโ ๐ backend/ # FastAPI ๅ็ซฏๅบ็จ
โ โโโ ๐ app/
โ โ โโโ ๐ main.py # FastAPI ไธปๅบ็จ
โ โ โโโ ๐ models/ # ๆฐๆฎๆจกๅ
โ โ โโโ ๐ routers/ # API ่ทฏ็ฑ
โ โ โโโ ๐ services/ # ไธๅก้ป่พๅฑ
โ โ โโโ ๐ utils/ # ๅทฅๅ
ทๆจกๅ
โ โโโ ๐ requirements.txt
โ โโโ ๐ .env # ็ฏๅข้
็ฝฎ
โโโ ๐ .gitignore
โโโ ๐ README.md
class ImageProcessor(ABC):
@abstractmethod
def process(self, image: Image.Image, parameters: Dict[str, Any] = None) -> Image.Image:
"""ๅค็ๅพๅ็ๆ ธๅฟๆนๆณ"""
pass
@abstractmethod
def get_name(self) -> str:
"""่ทๅๅค็ๅจๅ็งฐ"""
pass
@abstractmethod
def get_description(self) -> str:
"""่ทๅๅค็ๅจๆ่ฟฐ"""
pass- ๐จ GrayscaleProcessor: ้ซ่ดจ้็ฐๅบฆ่ฝฌๆข
- ๐ธ GhibliStyleProcessor: ๅฎซๅด้ชๅจ็ป้ฃๆ ผ่ฝฌๆข
- ๐ง CustomProcessor: ่ชๅฎไนๅๆฐๅๅค็
class AIUpscaleProcessor(ImageProcessor):
"""AI ๅพๅ่ถ
ๅ่พจ็ๅค็ๅจ"""
async def process(self, image: Image.Image, parameters: Dict[str, Any] = None) -> Image.Image:
# ่ฐ็จ็ฌฌไธๆน AI API
upscaled_image = await self.call_ai_api(image, parameters)
return upscaled_image- Node.js: >= 16.0
- Python: >= 3.9
- npm/yarn: ๅ ็ฎก็ๅจ
git clone <repository-url>
cd my-appcd backend
# ๅๅปบ่ๆ็ฏๅข
python -m venv venv
source venv/bin/activate # macOS/Linux
# ๆ venv\Scripts\activate # Windows
# ๅฎ่ฃ
ไพ่ต
pip install -r requirements.txt
# ๅฏๅจๅผๅๆๅกๅจ
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000cd frontend
# ๅฎ่ฃ
ไพ่ต
npm install
# ๅฏๅจๅผๅๆๅกๅจ
npm run dev- ๅ็ซฏๅบ็จ: http://localhost:5173
- API ๆๆกฃ: http://localhost:8000/docs
- API ไบคไบ: http://localhost:8000/redoc
POST /api/process
Content-Type: multipart/form-data
file: <image-file>
processing_type: "ghibli_style"
parameters: {"intensity": 0.8}GET /api/processorsๅๅบ็คบไพ๏ผ
{
"processors": [
{
"name": "grayscale",
"description": "ๅฐๅพๅ่ฝฌๆขไธบ็ฐๅบฆ",
"parameters": []
},
{
"name": "ghibli_style",
"description": "ๅฎซๅด้ชๅจ็ป้ฃๆ ผ่ฝฌๆข",
"parameters": ["intensity"]
}
]
}- ๅๅปบๅค็ๅจ็ฑป
# backend/app/services/processors/your_processor.py
class YourAIProcessor(ImageProcessor):
def process(self, image: Image.Image, parameters: Dict[str, Any] = None) -> Image.Image:
# ๅฎ็ฐไฝ ็ AI ๅค็้ป่พ
processed_image = your_ai_function(image, **parameters)
return processed_image
def get_name(self) -> str:
return "your_ai_processor"
def get_description(self) -> str:
return "ไฝ ็ AI ๅค็ๅจๆ่ฟฐ"- ๆณจๅๅค็ๅจ
# backend/app/services/image_processing.py
def _register_default_processors(self):
self.register_processor(YourAIProcessor())- ๆดๆฐๅ็ซฏ็ฑปๅ
// frontend/src/types/processing.ts
export type ProcessingType = 'grayscale' | 'ghibli_style' | 'your_ai_processor'# backend/.env
DATABASE_URL=sqlite:///./app.db
SECRET_KEY=your-super-secret-key
UPLOAD_DIR=./uploads
MAX_FILE_SIZE=10485760
# AI API ้
็ฝฎ
OPENAI_API_KEY=your-openai-key
STABILITY_AI_KEY=your-stability-key
REPLICATE_API_TOKEN=your-replicate-token- ๅพๅ็ผๅญ: Redis ็ผๅญๅค็็ปๆ
- ๅผๆญฅๅค็: ๆฏๆๆน้ๅพๅๅค็
- ๆตๅผไผ ่พ: ๅคงๆไปถๅๅไธไผ ไธ่ฝฝ
- CDN ้ๆ: ้ๆ่ตๆบๅ ้
- ๐ค ้ๆๆดๅค AI ๆจกๅ (Stable Diffusion, DALL-E)
- ๐ฌ ่ง้ขๅค็ๆฏๆ
- ๐ฅ ็จๆท็ณป็ปๅๅค็ๅๅฒ
- ๐ ๅค็็ปๆๅๆๅๅฏนๆฏ
- ๐ ๅค่ฏญ่จๆฏๆ
- ๐ฑ ็งปๅจ็ซฏ้้
- Fork ้กน็ฎ
- ๅๅปบ็นๆงๅๆฏ (
git checkout -b feature/AmazingFeature) - ๆไบคๆดๆน (
git commit -m 'Add some AmazingFeature') - ๆจ้ๅฐๅๆฏ (
git push origin feature/AmazingFeature) - ๅๅปบ Pull Request
ๆฌ้กน็ฎๅบไบ MIT ่ฎธๅฏ่ฏๅผๆบ - ๆฅ็ LICENSE ๆไปถไบ่งฃ่ฏฆๆ ใ
- ๐ง Email: ryanadkins512@gmail.com
โญ ๅฆๆ่ฟไธช้กน็ฎๅฏนไฝ ๆๅธฎๅฉ๏ผ่ฏท่่็ปไธช Star๏ผ