724 lines
44 KiB
Markdown
724 lines
44 KiB
Markdown
<img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&customColorList=6,11,20&height=200§ion=header&text=Toonflow&fontSize=90&fontColor=ffffff&animation=fadeIn&fontAlignY=50" width="100%"/>
|
||
|
||
<p>
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app">
|
||
<img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub" />
|
||
</a>
|
||
|
|
||
<a href="https://gitee.com/HBAI-Ltd/Toonflow-app">
|
||
<img src="https://img.shields.io/badge/Gitee-C71D23?style=flat-square&logo=gitee&logoColor=white" alt="Gitee" />
|
||
</a>
|
||
|
|
||
<a href="https://gitcode.com/HBAI-Ltd/Toonflow-app">
|
||
<img src="./atomgitLogo.svg" alt="Atomgit" style="height:20px"/>
|
||
</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="../README.md">简体中文</a> |
|
||
<a href="./README.zhtw.md">繁體中文</a> |
|
||
<a href="./README.en.md">English</a> |
|
||
<strong>ไทย</strong> |
|
||
<a href="./README.vi.md">Tiếng Việt</a> |
|
||
<a href="./README.ja.md">日本語</a> |
|
||
<a href="./README.ru.md">Русский</a>
|
||
</p>
|
||
|
||
<div align="center">
|
||
|
||
<img src="./logo.png" alt="Toonflow Logo" height="120"/>
|
||
|
||
# Toonflow
|
||
|
||
<p align="center">
|
||
<b>
|
||
โรงงานผลิตภาพยนตร์สั้น AI
|
||
<br />
|
||
เพียงคลิกไม่กี่ครั้ง นิยายก็กลายเป็นภาพยนตร์ได้ในพริบตา!
|
||
<br />
|
||
บทภาพยนตร์ AI × ภาพ AI × สร้างวิดีโอความเร็วสูง 🔥
|
||
</b>
|
||
</p>
|
||
<p align="center">
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/stargazers">
|
||
<img src="https://img.shields.io/github/stars/HBAI-Ltd/Toonflow-app?style=for-the-badge&logo=github" alt="Stars Badge" />
|
||
</a>
|
||
<a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">
|
||
<img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=for-the-badge" alt="Apache-2.0 License Badge" />
|
||
</a>
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/releases">
|
||
<img alt="release" src="https://img.shields.io/github/v/release/HBAI-Ltd/Toonflow-app?style=for-the-badge" />
|
||
</a>
|
||
</p>
|
||
<p align="center">
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/network/members">
|
||
<img src="https://img.shields.io/github/forks/HBAI-Ltd/Toonflow-app?style=for-the-badge&logo=github&color=orange" alt="Forks Badge" />
|
||
</a>
|
||
<a href="https://atomgit.com/HBAI-Ltd/Toonflow-app">
|
||
<img src="https://img.shields.io/badge/AtomGit-G--Star%20No.540-FF6B35?style=for-the-badge&logo=git&logoColor=white" alt="AtomGit G-Star No.540" />
|
||
</a>
|
||
<a href="https://discord.gg/HEjKmpNpAZ">
|
||
<img src="https://img.shields.io/badge/Discord-Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord" />
|
||
</a>
|
||
</p>
|
||
<p align="center">
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/issues">
|
||
<img src="https://img.shields.io/github/issues/HBAI-Ltd/Toonflow-app?style=for-the-badge&color=F48D73" alt="Issues" />
|
||
</a>
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/graphs/contributors">
|
||
<img src="https://img.shields.io/github/contributors/HBAI-Ltd/Toonflow-app?style=for-the-badge&color=2088FF" alt="Contributors" />
|
||
</a>
|
||
<a href="https://github.com/HBAI-Ltd/Toonflow-app/commits">
|
||
<img src="https://img.shields.io/github/last-commit/HBAI-Ltd/Toonflow-app?style=for-the-badge&color=blueviolet" alt="Last Commit" />
|
||
</a>
|
||
</p>
|
||
<p align="center">
|
||
<img src="https://ziadoua.github.io/m3-Markdown-Badges/badges/TypeScript/typescript2.svg" alt="TypeScript" />
|
||
<img src="https://ziadoua.github.io/m3-Markdown-Badges/badges/NodeJS/nodejs2.svg" alt="Node.js" />
|
||
<img src="https://ziadoua.github.io/m3-Markdown-Badges/badges/Docker/docker2.svg" alt="Docker" />
|
||
<img src="https://ziadoua.github.io/m3-Markdown-Badges/badges/Electron/electron2.svg" alt="Electron" />
|
||
</p>
|
||
<p align="center">
|
||
<img src="https://mobaicons.com/icons/typescript,nodejs,electron,docker,socket?perline=5" alt="Tech Stack Icons" />
|
||
</p>
|
||
<p align="center">
|
||
<img src="https://widgetbite.com/stats/HBAI-Ltd" alt="Visitors" />
|
||
</p>
|
||
|
||
> 🚀 **สตูดิโอภาพยนตร์สั้น All-in-One**: จากข้อความสู่ตัวละคร จากสตอรี่บอร์ดสู่ภาพยนตร์ ใช้ AI อัตโนมัติทั้งกระบวนการ ไม่ต้องมีพื้นฐานใด ๆ เพิ่มประสิทธิภาพการสร้างสรรค์มากกว่า 10 เท่า!
|
||
</div>
|
||
|
||
<div align="center">
|
||
<img src="./g-star.png" alt="ใบรับรอง AtomGit G-Star" height="300"/>
|
||
</div>
|
||
|
||
---
|
||
|
||
# 🌐 การรองรับหลายภาษา
|
||
|
||
Toonflow รองรับอินเทอร์เฟซภาษาดังต่อไปนี้:
|
||
|
||
| ภาษา | Language |
|
||
|------|----------|
|
||
| 简体中文 | Chinese (Simplified) |
|
||
| 繁體中文 | Chinese (Traditional) |
|
||
| English | English |
|
||
| ไทย | Thai |
|
||
| Tiếng Việt | Vietnamese |
|
||
| 日本語 | Japanese |
|
||
| Русский | Russian |
|
||
|
||
> 💡 กำลังเพิ่มการรองรับภาษาอื่นๆ ยินดีต้อนรับผู้ที่ต้องการช่วยแปล!
|
||
|
||
---
|
||
|
||
# 🌟 ฟีเจอร์หลัก
|
||
|
||
Toonflow เป็นเครื่องมือ AI สำหรับสร้างภาพยนตร์สั้นและการ์ตูน ที่สามารถแปลงนิยายเป็นภาพยนตร์ได้โดยอัตโนมัติ ด้วยการผสานเทคโนโลยี AI ในการสร้างตัวละคร บทภาพยนตร์ ภาพประกอบ และวิดีโอ ทำให้กระบวนการผลิตภาพยนตร์สั้นมีประสิทธิภาพสูง ด้วย Toonflow คุณสามารถจัดการทุกขั้นตอนตั้งแต่ข้อความต้นฉบับจนถึงวิดีโอสำเร็จรูปได้อย่างง่ายดาย ทำให้การผลิตภาพยนตร์สั้นฉลาด สะดวก และรวดเร็วยิ่งขึ้น
|
||
|
||
- ✅ **สร้างตัวละครอัตโนมัติ**
|
||
วิเคราะห์ข้อความจากนิยายต้นฉบับโดยอัตโนมัติ ระบุและสร้างโปรไฟล์ตัวละครอย่างชาญฉลาด รวมถึงรูปร่างหน้าตา นิสัย ตัวตน และรายละเอียดอื่น ๆ เพื่อสร้างพื้นฐานที่แข็งแรงสำหรับบทภาพยนตร์และภาพในขั้นตอนต่อไป
|
||
|
||
- ✅ **สร้างบทภาพยนตร์**
|
||
จากเหตุการณ์และบท (Chapter) ที่เลือก ระบบจะสร้างบทภาพยนตร์ที่มีโครงสร้างชัดเจน ประกอบด้วยบทสนทนา คำอธิบายฉาก และทิศทางเรื่องราว ช่วยแปลงงานวรรณกรรมเป็นบทภาพยนตร์ได้อย่างมีประสิทธิภาพ
|
||
|
||
- ✅ **สร้างสตอรี่บอร์ด (Storyboard)**
|
||
จากบทภาพยนตร์ ระบบจะสร้างพรอมต์และออกแบบเฟรมภาพสตอรี่บอร์ดโดยอัตโนมัติ โดยระบุรายละเอียดฉากหน้า ฉากกลาง ฉากหลัง การเคลื่อนไหวของตัวละคร พร็อพ และการจัดวางฉาก เพื่อสร้างแผนการผลิตวิดีโอที่สมบูรณ์
|
||
|
||
- ✅ **สังเคราะห์และตัดต่อวิดีโอ**
|
||
ใช้เทคโนโลยี AI สร้างคลิปวิดีโอคุณภาพสูง รองรับระบบตัดต่อออนไลน์ที่สามารถปรับแต่งได้ตามต้องการ ช่วยให้กระบวนการสร้างภาพยนตร์สั้นเป็นไปอย่างราบรื่นและรวดเร็ว
|
||
|
||
---
|
||
|
||
# 📦 รูปแบบการใช้งาน (Use Cases)
|
||
|
||
- สร้างคอนเทนต์วิดีโอสั้น
|
||
- ทดลองแปลงนิยายเป็นภาพยนตร์สั้น
|
||
- เครื่องมือ AI ในการดัดแปลงวรรณกรรมเป็นภาพยนตร์
|
||
- พัฒนาบทภาพยนตร์และสร้างต้นแบบ (Rapid Prototyping) อย่างรวดเร็ว
|
||
- สร้างฟุตเทจและวัสดุวิดีโอคุณภาพสูง
|
||
|
||
# 🔰 คู่มือการใช้งาน
|
||
|
||
## 📺 วิดีโอสอนการใช้งาน
|
||
|
||
[https://www.bilibili.com/video/BV1oXD7BqEqJ](https://www.bilibili.com/video/BV1oXD7BqEqJ)
|
||
[](https://www.bilibili.com/video/BV1oXD7BqEqJ)
|
||
|
||
**เริ่มต้นสร้างวิดีโอ AI กับ Toonflow ใน 12 นาที**
|
||
👉 [คลิกเพื่อรับชม](https://www.bilibili.com/video/BV1oXD7BqEqJ/?share_source=copy_web&vd_source=5b718c25439a901a34c7bc0c1d35b38e)
|
||
|
||
📱 **สแกน QR Code เพื่อรับชมวิดีโอบนมือถือ**
|
||
|
||
<img src="./videoQR.png" alt="สแกน QR Code เพื่อรับชมวิดีโอ" width="150"/>
|
||
|
||
---
|
||
|
||
# 📸 ภาพหน้าจอและวิดีโอตัวอย่าง
|
||
|
||
ภาพหน้าจอและวิดีโอด้านล่างนี้มาจาก Demo ภาพยนตร์สั้น AI ที่สร้างด้วย Toonflow ใช้เวลาประมาณ 2 ชั่วโมง ครอบคลุมการสร้างบทภาพยนตร์ สตอรี่บอร์ด และการตัดต่อ
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%"><a href="../screenshot/1.png"><img src="../screenshot/1.png" width="100%"/></a></td>
|
||
<td width="50%"><a href="../screenshot/2.png"><img src="../screenshot/2.png" width="100%"/></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%"><a href="../screenshot/3.png"><img src="../screenshot/3.png" width="100%"/></a></td>
|
||
<td width="50%"><a href="../screenshot/4.png"><img src="../screenshot/4.png" width="100%"/></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%"><a href="../screenshot/5.png"><img src="../screenshot/5.png" width="100%"/></a></td>
|
||
<td width="50%"><a href="../screenshot/6.png"><img src="../screenshot/6.png" width="100%"/></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%"><a href="../screenshot/7.png"><img src="../screenshot/7.png" width="100%"/></a></td>
|
||
<td width="50%"><a href="../screenshot/8.png"><img src="../screenshot/8.png" width="100%"/></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%"><a href="../screenshot/9.png"><img src="../screenshot/9.png" width="100%"/></a></td>
|
||
<td width="50%"><a href="../screenshot/10.png"><img src="../screenshot/10.png" width="100%"/></a></td>
|
||
</tr>
|
||
</table>
|
||
|
||
## ข้อมูล Demo
|
||
|
||
| รายการ | รายละเอียด |
|
||
|--------|-----------|
|
||
| ระยะเวลาผลิต | ประมาณ 2 ชั่วโมง |
|
||
| โมเดลวิดีโอ | Seedance 2.0 |
|
||
| โมเดลรูปภาพ | GPT Image 2 |
|
||
| โมเดลภาษา | Claude Opus 4.6 |
|
||
| ความยาว | ประมาณ 2 นาที (ต้นฉบับ 3 นาที ตัดออกประมาณ 1 นาที)|
|
||
|
||
## รายละเอียดต้นทุน
|
||
|
||
| รายการ | ค่าใช้จ่าย |
|
||
|--------|-----------|
|
||
| รูปภาพ (270 รูป × ¥0.04) | ¥10.8 |
|
||
| วิดีโอ (45 คลิป × ¥3.5) | ¥157.5 |
|
||
| รวม | **~¥168** |
|
||
|
||
> 📌 Demo มีความละเอียดต้นฉบับ 1080×1882 บีบอัดเป็น 480p สำหรับเวอร์ชันที่เผยแพร่ หากมีปัญหาด้านลิขสิทธิ์ กรุณาติดต่อ [ltlctools@outlook.com](mailto:ltlctools@outlook.com)
|
||
|
||
## วิดีโอตัวอย่าง
|
||
|
||
https://github.com/user-attachments/assets/2d9fddac-dfdf-4640-b030-b09d7f7287e9
|
||
|
||
> หากวิดีโอไม่เล่น [คลิกที่นี่เพื่อดาวน์โหลด](https://github.com/user-attachments/assets/2d9fddac-dfdf-4640-b030-b09d7f7287e9)
|
||
|
||
---
|
||
|
||
# 🚀 การติดตั้ง
|
||
|
||
## ข้อกำหนดเบื้องต้น
|
||
|
||
ก่อนติดตั้งและใช้งาน Toonflow โปรดเตรียมข้อมูลต่อไปนี้ให้พร้อม:
|
||
|
||
- ✅ ที่อยู่ API ของโมเดลภาษาขนาดใหญ่ (LLM)
|
||
- ✅ ที่อยู่ API ของบริการสร้างวิดีโอ (Sora หรือ Doubao)
|
||
- ✅ ที่อยู่ API ของโมเดลสร้างภาพ Nano Banana Pro
|
||
|
||
## การติดตั้งบนเครื่อง (Local)
|
||
|
||
### 1. ดาวน์โหลดและติดตั้ง
|
||
|
||
| ระบบปฏิบัติการ | GitHub | Atomgit | ดาวน์โหลดผ่าน Quark Drive | คำอธิบาย |
|
||
| :------: | :----------------------------------------------------------- | :------------------------------------------------------------ | :---------------------------------------------- | :------------- |
|
||
| Windows | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | [Release](https://gitcode.com/HBAI-Ltd/Toonflow-app/releases) | [Quark Drive](https://pan.quark.cn/s/94ef07509df0) | ตัวติดตั้งอย่างเป็นทางการ |
|
||
| Linux | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | [Release](https://gitcode.com/HBAI-Ltd/Toonflow-app/releases) | [Quark Drive](https://pan.quark.cn/s/94ef07509df0) | ตัวติดตั้งอย่างเป็นทางการ |
|
||
| macOS | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | [Release](https://gitcode.com/HBAI-Ltd/Toonflow-app/releases) | [Quark Drive](https://pan.quark.cn/s/94ef07509df0) | ตัวติดตั้งอย่างเป็นทางการ |
|
||
|
||
> [!CAUTION]
|
||
> สำหรับระบบ macOS โปรดไปที่ **การตั้งค่า > ความเป็นส่วนตัวและความปลอดภัย** เพื่ออนุญาตให้แอปพลิเคชันทำงาน มิฉะนั้นอาจเปิดโปรแกรมไม่ได้เนื่องจากปัญหาใบรับรองความปลอดภัย
|
||
>
|
||
> อ้างอิงเอกสารจาก Zhihu: [https://www.zhihu.com/question/433389276](https://www.zhihu.com/question/433389276)
|
||
|
||
> เนื่องจากข้อจำกัดเรื่องสภาพแวดล้อมระบบและขนาดไฟล์ของ Gitee Release ปัจจุบันจึงยังไม่มีลิงก์ดาวน์โหลดบน Gitee
|
||
|
||
### 2. เริ่มการทำงาน
|
||
|
||
หลังจากติดตั้งเสร็จสิ้น เพียงเปิดโปรแกรม Toonflow ก็สามารถเริ่มใช้งานได้ทันที
|
||
|
||
> ⚠️ **เข้าสู่ระบบครั้งแรก**
|
||
> ชื่อผู้ใช้: `admin`
|
||
> รหัสผ่าน: `admin123`
|
||
|
||
## การใช้งานผ่าน Docker
|
||
|
||
### ข้อกำหนดเบื้องต้น
|
||
|
||
- ติดตั้ง [Docker](https://docs.docker.com/get-docker/) เวอร์ชัน 20.10 ขึ้นไป เรียบร้อยแล้ว
|
||
|
||
### วิธีที่ 1: การติดตั้งออนไลน์
|
||
|
||
กำลังพัฒนา
|
||
ปัจจุบันแนะนำให้ใช้วิธี Build บนเครื่องก่อน
|
||
|
||
### วิธีที่ 2: การ Build บนเครื่อง
|
||
|
||
ใช้วิธี Build จากซอร์สโค้ดที่มีอยู่ในเครื่องโดยตรง
|
||
เหมาะสำหรับนักพัฒนาหรือผู้ใช้ที่โคลน Repository มาแล้ว (ต้องติดตั้ง Git บนเครื่องก่อน)
|
||
|
||
```shell
|
||
# โคลนโปรเจกต์ก่อน (ข้ามขั้นตอนนี้ถ้ามีอยู่แล้ว)
|
||
git clone https://github.com/HBAI-Ltd/Toonflow-app.git
|
||
cd Toonflow-app
|
||
|
||
# ใช้ docker-compose ในการ Build และรันบนเครื่อง
|
||
yarn docker:local
|
||
|
||
# หรือทำการ Build แบบแมนนวล
|
||
docker build -t toonflow .
|
||
docker run -d -p <พอร์ตบนเครื่อง>:10588 -v <พาธข้อมูลบนเครื่อง>:/app/data toonflow
|
||
|
||
# จากนั้นสามารถเข้าถึงหน้าเว็บผ่านพอร์ตที่ระบุ ที่พาธ /web/index.html
|
||
# ตัวอย่าง: http://localhost:10588/web/index.html
|
||
```
|
||
|
||
### คำอธิบายพอร์ตบริการ
|
||
|
||
| พอร์ต | การใช้งาน | การจับคู่พอร์ต (Mapping) |
|
||
| ------- | ---------------------- | ------------------------ |
|
||
| `10588` | พอร์ตบริการหลัก (API) | `10588:10588` |
|
||
|
||
**คำอธิบายตัวแปรสภาพแวดล้อม (Environment Variables):**
|
||
|
||
| ตัวแปร | คำอธิบาย |
|
||
| ---------- | ----------------------------------------------------- |
|
||
| `NODE_ENV` | สภาพแวดล้อมการทำงาน (`prod` = Production) |
|
||
| `PORT` | พอร์ตสำหรับให้บริการ (ค่าเริ่มต้น 10588) |
|
||
| `OSSURL` | ที่อยู่ OSS สำหรับเก็บและโหลดไฟล์สาธารณะ (Static files) |
|
||
|
||
---
|
||
|
||
## การติดตั้งบนคลาวด์ / เซิร์ฟเวอร์
|
||
|
||
### 1. ข้อกำหนดสภาพแวดล้อมเซิร์ฟเวอร์
|
||
|
||
- **ระบบปฏิบัติการ**: Ubuntu 20.04+ / CentOS 7+
|
||
- **Node.js**: 24.x (แนะนำ, ขั้นต่ำ 23.11.1+)
|
||
- **RAM**: 2GB+
|
||
|
||
### 2. การติดตั้งบนเซิร์ฟเวอร์
|
||
|
||
#### 1. ติดตั้งสภาพแวดล้อม
|
||
|
||
```bash
|
||
# ติดตั้ง Node.js
|
||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
|
||
source ~/.bashrc
|
||
nvm install 24
|
||
# ติดตั้ง Yarn และ PM2
|
||
npm install -g yarn pm2
|
||
```
|
||
|
||
#### 2. ดึงโค้ดโปรเจกต์
|
||
|
||
**โคลนจาก GitHub:**
|
||
|
||
```bash
|
||
cd /opt
|
||
git clone https://github.com/HBAI-Ltd/Toonflow-app.git
|
||
cd Toonflow-app
|
||
yarn install
|
||
yarn build
|
||
```
|
||
|
||
**โคลนจาก Gitee (แนะนำสำหรับประเทศจีน):**
|
||
|
||
```bash
|
||
cd /opt
|
||
git clone https://gitee.com/HBAI-Ltd/Toonflow-app.git
|
||
cd Toonflow-app
|
||
yarn install
|
||
yarn build
|
||
```
|
||
|
||
#### 3. ตั้งค่า PM2
|
||
|
||
สร้างไฟล์ `pm2.json`:
|
||
|
||
```json
|
||
{
|
||
"name": "toonflow-app",
|
||
"script": "data/serve/app.js",
|
||
"instances": "max",
|
||
"exec_mode": "cluster",
|
||
"env": {
|
||
"NODE_ENV": "prod",
|
||
"PORT": 10588,
|
||
"OSSURL": "http://127.0.0.1:10588/"
|
||
}
|
||
}
|
||
```
|
||
|
||
**คำอธิบายตัวแปรสภาพแวดล้อม (Environment Variables):**
|
||
|
||
| ตัวแปร | คำอธิบาย |
|
||
| ---------- | ----------------------------------------------------- |
|
||
| `NODE_ENV` | สภาพแวดล้อมการทำงาน (`prod` = Production) |
|
||
| `PORT` | พอร์ตสำหรับให้บริการ (ค่าเริ่มต้น 10588) |
|
||
| `OSSURL` | ที่อยู่ OSS สำหรับเก็บและโหลดไฟล์สาธารณะ (Static files) |
|
||
|
||
---
|
||
|
||
#### 4. เริ่มการทำงาน
|
||
|
||
```bash
|
||
pm2 start pm2.json
|
||
pm2 startup
|
||
pm2 save
|
||
```
|
||
|
||
#### 5. คำสั่งที่ใช้บ่อย
|
||
|
||
```bash
|
||
pm2 list # ดู Process ทั้งหมด
|
||
pm2 logs toonflow-app # ดู Logs
|
||
pm2 restart all # รีสตาร์ทเซอร์วิส
|
||
pm2 monit # เปิดหน้าต่าง Monitoring
|
||
```
|
||
|
||
> ⚠️ **เข้าสู่ระบบครั้งแรก**
|
||
> ชื่อผู้ใช้: `admin`
|
||
> รหัสผ่าน: `admin123`
|
||
|
||
#### 6. การติดตั้งเว็บไซต์ฟรอนต์เอนด์ (Frontend)
|
||
|
||
หากต้องการติดตั้งหรือปรับแต่งอินเทอร์เฟซฟรอนต์เอนด์แยกต่างหาก โปรดอ้างอิง Repository ฟรอนต์เอนด์ดังนี้:
|
||
|
||
- **GitHub**: [Toonflow-web](https://github.com/HBAI-Ltd/Toonflow-web)
|
||
- **Gitee**: [Toonflow-web](https://gitee.com/HBAI-Ltd/Toonflow-web)
|
||
|
||
> 💡 **หมายเหตุ**: Repository นี้มาพร้อมไฟล์ฟรอนต์เอนด์ที่คอมไพล์เสร็จสมบูรณ์แล้ว
|
||
> ผู้ใช้ทั่วไปไม่จำเป็นต้องติดตั้งฟรอนต์เอนด์แยก Repository นี้มีไว้สำหรับนักพัฒนาที่ต้องการปรับแต่งหรือพัฒนาเพิ่มเติมเท่านั้น
|
||
|
||
---
|
||
|
||
# 🔧 คู่มือสำหรับนักพัฒนา (Development Workflow Guide)
|
||
|
||
> [!CAUTION]
|
||
> 🚧 **ข้อบังคับในการส่ง Pull Request** 🚧
|
||
>
|
||
> ⛔ **ไม่รับ PR ใน branch `master`**｜✅ **โปรดส่ง PR ไปที่ branch `develop`**
|
||
>
|
||
> ยินดีต้อนรับนักพัฒนาทุกท่านที่สนใจร่วมพัฒนา Toonflow
|
||
> หากต้องการเข้าร่วม โปรดติดต่อผู้ดูแลโปรเจกต์ (ACT) ในกลุ่มพูดคุย
|
||
|
||
## 🛠️ เทคโนโลยีที่ใช้ (Tech Stack)
|
||
|
||
| ประเภท | เทคโนโลยี |
|
||
| ---------- | ----------------------------------------------------------------------------------------- |
|
||
| Runtime | Node.js 23.11.1+ |
|
||
| Language | TypeScript 5.x |
|
||
| Backend | Express 5 |
|
||
| Database | SQLite (better-sqlite3 / knex) |
|
||
| AI Integ. | Vercel AI SDK (OpenAI / Anthropic / Google / DeepSeek / Zhipu / MiniMax / Qwen / xAI) |
|
||
| Local Inf. | @huggingface/transformers (ONNX) |
|
||
| Real-time | Socket.IO |
|
||
| Desktop | Electron 40 |
|
||
| Image Proc.| Sharp |
|
||
| Container | Docker |
|
||
|
||
## การเตรียมสภาพแวดล้อมการพัฒนา
|
||
|
||
- **Node.js**: ต้องใช้เวอร์ชัน 23.11.1 ขึ้นไป
|
||
- **Yarn**: แนะนำให้ใช้เป็น Package Manager
|
||
|
||
## การเริ่มโปรเจกต์อย่างรวดเร็ว
|
||
|
||
1. **โคลนโปรเจกต์**
|
||
|
||
**โคลนจาก GitHub:**
|
||
|
||
```bash
|
||
git clone https://github.com/HBAI-Ltd/Toonflow-app.git
|
||
cd Toonflow-app
|
||
```
|
||
|
||
**โคลนจาก Gitee (แนะนำสำหรับประเทศจีน):**
|
||
|
||
```bash
|
||
git clone https://gitee.com/HBAI-Ltd/Toonflow-app.git
|
||
cd Toonflow-app
|
||
```
|
||
|
||
2. **ติดตั้ง Dependencies**
|
||
|
||
ให้รันคำสั่งด้านล่างนี้ใน root ของโปรเจกต์เพื่อติดตั้ง Dependencies:
|
||
|
||
```bash
|
||
yarn install
|
||
```
|
||
|
||
3. **เริ่มใช้งานในโหมด Development**
|
||
|
||
โปรเจกต์นี้ประกอบด้วย **บริการ Backend API** และ **หน้า Frontend** คุณสามารถเลือกวิธีการเปิดใช้งานได้ตามต้องการ:
|
||
|
||
- **วิธีที่ 1: รันเฉพาะ Backend อย่างเดียว**
|
||
|
||
```bash
|
||
yarn dev
|
||
```
|
||
|
||
> ⚠️ คำสั่งนี้จะรัน **เฉพาะ Backend API** (พอร์ต 10588) **โดยไม่มีหน้า Frontend**
|
||
> เมื่อเข้าถึง `http://localhost:10588` จะสามารถเรียกใช้งาน API ได้เท่านั้น
|
||
> หากต้องการใช้งานพร้อมกับหน้าเว็บ Frontend โปรดรัน Frontend แยกต่างหาก หรือใช้โหมด GUI ด้านล่างนี้
|
||
|
||
- **วิธีที่ 2: รัน Electron Desktop Client**
|
||
|
||
```bash
|
||
yarn dev:gui
|
||
```
|
||
|
||
> คำสั่งนี้จะรันทั้ง Backend และหน้าต่าง Electron Desktop พร้อมกัน โดยมี Frontend ฝังมาในตัว
|
||
> โปรแกรมพร้อมใช้งานทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม
|
||
> เหมาะสำหรับนักพัฒนาที่ต้องการทดสอบฟีเจอร์ทั้งหมดของแอปพลิเคชัน
|
||
|
||
- **วิธีที่ 3: รันโหมด Production**
|
||
|
||
```bash
|
||
yarn start
|
||
```
|
||
|
||
> รันโปรแกรมในโหมด Production ทันทีหลังจากที่คอมไพล์เสร็จ (ต้องรัน `yarn build` ก่อน)
|
||
|
||
4. **การแพ็คโปรเจกต์ (Build/Dist)**
|
||
|
||
- คอมไพล์และสร้างไฟล์ TypeScript:
|
||
|
||
```bash
|
||
yarn build
|
||
```
|
||
|
||
- แพ็คโปรเจกต์เป็นไฟล์รัน (Executable) สำหรับ Windows:
|
||
|
||
```bash
|
||
yarn dist:win
|
||
```
|
||
|
||
- แพ็คโปรเจกต์สำหรับ macOS:
|
||
|
||
```bash
|
||
yarn dist:mac
|
||
```
|
||
|
||
- แพ็คโปรเจกต์สำหรับ Linux:
|
||
|
||
```bash
|
||
yarn dist:linux
|
||
```
|
||
|
||
5. **ตรวจสอบคุณภาพโค้ด (Lint)**
|
||
|
||
- ทำการตรวจสอบไวยากรณ์และข้อกำหนดโค้ด (Linting) ทั้งหมด:
|
||
|
||
```bash
|
||
yarn lint
|
||
```
|
||
|
||
6. **แผงควบคุมดีบัก AI (ตัวเลือก)**
|
||
|
||
เปิดใช้งานเครื่องมือดีบักแบบ Visual ของ AI SDK เพื่อความสะดวกในการดีบักการเรียกใช้ AI:
|
||
|
||
```bash
|
||
yarn debug:ai
|
||
```
|
||
|
||
## การพัฒนาฟรอนต์เอนด์ (Frontend)
|
||
|
||
หากต้องการแก้ไขหรือพัฒนาอินเทอร์เฟซฟรอนต์เอนด์ โปรดไปที่ Repository ฟรอนต์เอนด์ดังนี้:
|
||
|
||
- **GitHub**: [Toonflow-web](https://github.com/HBAI-Ltd/Toonflow-web)
|
||
- **Gitee**: [Toonflow-web](https://gitee.com/HBAI-Ltd/Toonflow-web)
|
||
|
||
หลังจาก Build ฟรอนต์เอนด์เสร็จสิ้นแล้ว ให้คัดลอกโฟลเดอร์ `dist` ทั้งหมดไปวางในโฟลเดอร์ `data/web` ของโปรเจกต์นี้เพื่อทำการรวมเข้ากับระบบ
|
||
|
||
## โครงสร้างโปรเจกต์
|
||
|
||
```
|
||
📂 build/ # ผลลัพธ์หลัง Build
|
||
📂 data/ # ข้อมูล Runtime
|
||
│ ├─ 📂 models/ # โมเดล Infer บนเครื่อง (ONNX)
|
||
│ ├─ 📂 oss/ # Object Storage (เก็บภาพ ตัวละคร และฉาก)
|
||
│ ├─ 📂 serve/ # จุดเข้าใช้งานโหมด Production
|
||
│ ├─ 📂 skills/ # Prompt ทักษะของ Agent
|
||
│ └─ 📂 web/ # Frontend ที่ Build แล้ว (ฝังมาในตัว)
|
||
📂 docs/ # เอกสารและรูปภาพคู่มือ
|
||
📂 env/ # การตั้งค่าสภาพแวดล้อม
|
||
📂 scripts/ # สคริปต์ช่วยเหลือและ Build
|
||
📂 src/
|
||
├─ 📂 agents/ # โมดูล AI Agent
|
||
│ ├─ 📂 productionAgent/ # Agent ฝ่ายผลิต (Production)
|
||
│ └─ 📂 scriptAgent/ # Agent ฝ่ายบทภาพยนตร์ (Script)
|
||
├─ 📂 lib/ # ไลบรารีส่วนกลาง (Init ฐานข้อมูล, รูปแบบ Response)
|
||
├─ 📂 middleware/ # Middleware
|
||
├─ 📂 routes/ # โมดูล Routing
|
||
│ ├─ 📂 agents/ # จัดการหน่วยความจำ Agent
|
||
│ ├─ 📂 artStyle/ # จัดการสไตล์ภาพศิลป์
|
||
│ ├─ 📂 assets/ # จัดการ Asset
|
||
│ ├─ 📂 assetsGenerate/ # สร้าง Asset
|
||
│ ├─ 📂 cornerScape/ # จัดการสตอรี่บอร์ด (Storyboard)
|
||
│ ├─ 📂 general/ # API ทั่วไป
|
||
│ ├─ 📂 login/ # การยืนยันตัวตน
|
||
│ ├─ 📂 migrate/ # Migration ข้อมูล
|
||
│ ├─ 📂 modelSelect/ # เลือกโมเดล
|
||
│ ├─ 📂 novel/ # จัดการนวนิยายต้นฉบับ
|
||
│ ├─ 📂 other/ # ฟังก์ชันอื่น ๆ
|
||
│ ├─ 📂 production/ # จัดการการผลิต/ตัดต่อ
|
||
│ ├─ 📂 project/ # จัดการโปรเจกต์
|
||
│ ├─ 📂 script/ # สร้างบทภาพยนตร์
|
||
│ ├─ 📂 scriptAgent/ # Interface ของ Script Agent
|
||
│ ├─ 📂 setting/ # ตั้งค่าระบบ
|
||
│ ├─ 📂 task/ # จัดการ Task
|
||
│ └─ 📂 test/ # API ทดสอบ
|
||
├─ 📂 socket/ # การสื่อสารเรียลไทม์ผ่าน WebSocket
|
||
├─ 📂 types/ # ประกาศ TypeScript Types
|
||
├─ 📂 utils/ # ฟังก์ชันยูทิลิตี้
|
||
├─ 📄 app.ts # จุดเริ่มต้นของแอปพลิเคชัน (App Entry)
|
||
├─ 📄 core.ts # เริ่มต้น Core ระบบ
|
||
├─ 📄 env.ts # จัดการตัวแปร Environment
|
||
├─ 📄 err.ts # จัดการ Error
|
||
├─ 📄 logger.ts # โมดูล Logger
|
||
├─ 📄 router.ts # ลงทะเบียน Router
|
||
└─ 📄 utils.ts # ฟังก์ชันอรรถประโยชน์ทั่วไป
|
||
📄 Dockerfile # ไฟล์สร้าง Docker
|
||
📄 electron-builder.yml # การตั้งค่าการแพ็ค Electron
|
||
📄 skillList.json # รายการทักษะ
|
||
📄 LICENSE # สัญญาอนุญาต (Apache-2.0)
|
||
📄 NOTICES.txt # ประกาศไลบรารี Third-party
|
||
📄 package.json # การตั้งค่าโปรเจกต์
|
||
📄 tsconfig.json # การตั้งค่า TypeScript
|
||
```
|
||
|
||
---
|
||
|
||
# 🔗 Repository ที่เกี่ยวข้อง
|
||
|
||
| Repository | คำอธิบาย | GitHub | Gitee |
|
||
| ---------------- | --------------------------------------------- | -------------------------------------------------- | ------------------------------------------------ |
|
||
| **Toonflow-app** | ไคลเอนต์แบบสมบูรณ์ (Repository นี้ แนะนำสำหรับผู้ใช้ทั่วไป) | [GitHub](https://github.com/HBAI-Ltd/Toonflow-app) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-app) |
|
||
| **Toonflow-web** | ซอร์สโค้ดฟรอนต์เอนด์ (เหมาะสำหรับนักพัฒนาฟรอนต์เอนด์) | [GitHub](https://github.com/HBAI-Ltd/Toonflow-web) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-web) |
|
||
|
||
> 💡 **เคล็ดลับ**: หากคุณต้องการใช้งาน Toonflow เพียงดาวน์โหลดไคลเอนต์จาก Repository นี้ก็เพียงพอแล้ว
|
||
> Repository Toonflow-web มีไว้สำหรับนักพัฒนาที่ต้องการปรับแต่งหรือพัฒนาต่อยอดอินเทอร์เฟซเท่านั้น
|
||
|
||
---
|
||
|
||
# 👨👩👧👦 กลุ่ม Discord ชุมชน
|
||
|
||
คลิกที่ไอคอนด้านล่างเพื่อเข้าร่วม Discord：
|
||
|
||
[](https://discord.gg/HEjKmpNpAZ)
|
||
|
||
หรือคลิกลิงก์โดยตรง: [https://discord.gg/HEjKmpNpAZ](https://discord.gg/HEjKmpNpAZ)
|
||
|
||
---
|
||
|
||
# 💌 ติดต่อเรา
|
||
|
||
📧 อีเมล: [ltlctools@outlook.com](mailto:ltlctools@outlook.com?subject=สอบถาม%20เรื่อง%20Toonflow)
|
||
|
||
---
|
||
|
||
# 📜 ใบอนุญาต (License)
|
||
|
||
Toonflow เปิดเผยเป็นโอเพ่นซอร์สภายใต้สัญญาอนุญาต Apache-2.0 พร้อมด้วยข้อตกลงเชิงพาณิชย์เพิ่มเติม
|
||
|
||
รายละเอียดสัญญา Apache-2.0: https://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
## ข้อตกลงเชิงพาณิชย์เพิ่มเติม
|
||
|
||
- หากนำซอฟต์แวร์นี้ไปเผยแพร่ในรูปแบบผลิตภัณฑ์ให้กับ **บุคคลที่สามอิสระตั้งแต่ 2 รายขึ้นไป** ต้องได้รับ **การอนุญาตเชิงพาณิชย์เป็นลายลักษณ์อักษร** จาก HBAI-Ltd
|
||
- หากใช้งานร่วมกันภายในโดย **นิติบุคคลไม่เกิน 5 ราย** และไม่ให้บริการแก่บุคคลภายนอก จะถือเป็นการใช้งานภายในและ **ไม่ต้องขออนุญาต**
|
||
- ห้ามลบหรือแก้ไขโลโก้หรือข้อมูลลิขสิทธิ์ภายใน Toonflow
|
||
|
||
## กรณีใช้งานฟรีตลอดชีพ
|
||
|
||
- ✅ ใช้ Toonflow สร้างเนื้อหาเพื่อรับส่วนแบ่งรายได้จากแพลตฟอร์มวิดีโอ
|
||
- ✅ นำโค้ดไปพัฒนาต่อยอดเพื่อใช้งานภายในทีม
|
||
- ✅ ใช้งานร่วมกันภายในโดยนิติบุคคลไม่เกิน 5 ราย
|
||
- ✅ เพื่อการศึกษา การวิจัย และวัตถุประสงค์ที่ไม่ใช่เชิงพาณิชย์
|
||
|
||
## โครงสร้างราคาการอนุญาตเชิงพาณิชย์
|
||
|
||
| ระยะ | ยอดขายรายปี | ค่าธรรมเนียมรายปี |
|
||
|--------------|-----------------------------|-----------------------|
|
||
| 🌱 ช่วงเริ่มต้น (Incubation) | < ¥100,000 | **ฟรี** |
|
||
| 🚀 ช่วง startup | ¥100,000 – 500,000 | ¥5,000 / ปี |
|
||
| 📈 ช่วงเติบโต (Growth) | ¥500,000 – 1,500,000 | ¥20,000 / ปี |
|
||
| 🏢 ช่วงขยายขนาด (Scale) | ¥1,500,000 – 5,000,000 | ¥80,000 / ปี |
|
||
| 🌐 ระดับองค์กร (Enterprise) | > ¥5,000,000 | เจรจาต่อรอง |
|
||
|
||
> **ข้อกำหนดไม่ย้อนหลัง (Non-Retroactivity)**: ผู้ใช้ที่เคยใช้งาน Toonflow ภายใต้สัญญา AGPL-3.0 ก่อนเวอร์ชัน v1.0.8 จะยังคงผูกพันตาม AGPL-3.0 ต่อไป และไม่ได้รับผลกระทบจากการเปลี่ยนแปลงข้อตกลงนี้
|
||
|
||
ดูรายละเอียดข้อตกลงฉบับเต็มได้ที่ไฟล์ [LICENSE](./LICENSE)
|
||
|
||
---
|
||
|
||
# ⭐️ ประวัติการให้ดาว (Star History)
|
||
|
||
[](https://www.star-history.com/#HBAI-Ltd/Toonflow-app)
|
||
|
||
[](https://www.star-history.com/#HBAI-Ltd/Toonflow-app&type=timeline&legend=top-left)
|
||
|
||
---
|
||
|
||
|
||
# 🙏 ขอขอบคุณ
|
||
|
||
ขอขอบคุณโปรเจกต์โอเพ่นซอร์สต่อไปนี้ที่ช่วยสนับสนุน Toonflow อย่างมาก:
|
||
|
||
- [Express](https://expressjs.com/) - Web Framework สำหรับ Node.js ที่รวดเร็ว เปิดกว้าง และใช้งานง่าย
|
||
- [AI SDK](https://ai-sdk.dev/) - ชุดเครื่องมือ AI สำหรับ TypeScript
|
||
- [Better-SQLite3](https://github.com/WiseLibs/better-sqlite3) - ไลบรารี SQLite3 ประสิทธิภาพสูง
|
||
- [Sharp](https://sharp.pixelplumbing.com/) - ไลบรารีประมวลผลภาพบน Node.js ประสิทธิภาพสูง
|
||
- [Axios](https://axios-http.com/) - HTTP Client แบบ Promise-based
|
||
- [Zod](https://zod.dev/) - ไลบรารีตรวจสอบโครงสร้างข้อมูล (Schema Validation) สำหรับ TypeScript
|
||
- [Socket.IO](https://socket.io/) - เอนจินการสื่อสารเรียลไทม์แบบสองทาง
|
||
- [Electron](https://www.electronjs.org/) - เฟรมเวิร์กพัฒนาแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์ม
|
||
- [Hugging Face Transformers](https://huggingface.co/docs/transformers.js) - ไลบรารี Machine Learning สำหรับการ Inference บนเครื่อง
|
||
|
||
ขอขอบคุณองค์กรและผู้สนับสนุนต่อไปนี้ที่ช่วยเหลือ Toonflow:
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th align="center">Logo</th>
|
||
<th align="center">ชื่อ</th>
|
||
<th align="center">ประเภทการสนับสนุน</th>
|
||
<th>รายละเอียด</th>
|
||
<th align="center">เว็บไซต์</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td align="center"><img src="./sponsored/sophnet.png" alt="Sophnet Logo" width="48"></td>
|
||
<td align="center"><b>Sophnet</b></td>
|
||
<td align="center">💻 ผู้สนับสนุนพลังงาน</td>
|
||
<td>มุ่งสร้างแพลตฟอร์ม API สำหรับ Model Inference แบบครบวงจร ที่เร็วกว่า เสถียรกว่า และประหยัดกว่า</td>
|
||
<td align="center"><a href="https://www.sophnet.com/">เว็บไซต์</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td align="center"><img src="./sponsored/atlascloud.png" alt="Atlas Cloud Logo" width="48"></td>
|
||
<td align="center"><b>Atlas Cloud</b></td>
|
||
<td align="center">💻 ผู้สนับสนุนพลังงาน</td>
|
||
<td>แพลตฟอร์ม Inference แบบ Omni-modal แรกของโลก รองรับการสนทนา ภาพ วิดีโอ เสียง — ผ่าน API เดียว รองรับโมเดลกว่า 300 รายการ เข้ากันได้กับ OpenAI</td>
|
||
<td align="center"><a href="https://www.atlascloud.ai/">เว็บไซต์</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td align="center"><img src="./sponsored/hunyuan.webp" alt="Tencent Hunyuan3D Logo" width="48"></td>
|
||
<td align="center"><b>Tencent Hunyuan3D</b></td>
|
||
<td align="center">🌐 การสนับสนุนเทคนิค World Model</td>
|
||
<td>Tencent Hunyuan3D AI Creation Engine ใช้พื้นฐานจากโมเดล Tencent Hunyuan3D 2.5 — แพลตฟอร์มสร้างเนื้อหา 3D ด้วย AI แบบครบวงจรแห่งแรกของอุตสาหกรรม รองรับ text-to-3D, image-to-3D, สร้างแอนิเมชัน 3D, สร้าง texture, sketch-to-3D และสร้างตัวละคร 3D พร้อมข้อได้เปรียบในการสร้างโมเดล low-poly</td>
|
||
<td align="center"><a href="https://3d.hunyuan.tencent.com/">เว็บไซต์</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
รายการ Third-party Dependencies แบบสมบูรณ์ สามารถดูได้ที่ไฟล์ `NOTICES.txt`
|
||
|
||
##### copyright © Beijing AIA Network Technology Co., Ltd.
|
||
|
||
<img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&customColorList=6,11,20&height=100§ion=footer" width="100%"/> |