mirror of
https://github.com/Zippland/NanoComic.git
synced 2026-01-19 01:21:08 +08:00
docs: rewrite README and add NOTICE; clarify licensing
This commit is contained in:
zihanjian
12
NOTICE
Normal file
12
NOTICE
Normal file
@@ -0,0 +1,12 @@
|
||||
NanoComic / 漫画分镜生成器
|
||||
|
||||
归属与感谢（Attributions & Acknowledgements）
|
||||
|
||||
- 本项目衍生自 “Gemini Fullstack LangGraph Quickstart”，其代码在 Apache License 2.0 下发布。
|
||||
- `backend/` 目录包含 MIT 许可（Philipp Schmid）的代码与思路示例。
|
||||
- 感谢 LangGraph 社区与 Google Gemini 生态提供的工具与文档支持。
|
||||
|
||||
许可说明（Licensing Notes）
|
||||
|
||||
- 本项目继续遵守并保留上游许可证内容：根目录 `LICENSE`（Apache-2.0）与 `backend/LICENSE`（MIT）。
|
||||
- 在分发或修改本项目时，请一并保留上述许可证与本 NOTICE 文件。
|
||||
125
README.md
125
README.md
@@ -1,120 +1,25 @@
|
||||
# Gemini Fullstack LangGraph Quickstart
|
||||
# NanoComic 漫画分镜生成器
|
||||
|
||||
This project demonstrates a fullstack application using a React frontend and a LangGraph-powered backend agent. The agent is designed to perform comprehensive research on a user's query by dynamically generating search terms, querying the web using Google Search, reflecting on the results to identify knowledge gaps, and iteratively refining its search until it can provide a well-supported answer with citations. This application serves as an example of building research-augmented conversational AI using LangGraph and Google's Gemini models.
|
||||
一个面向漫画创作的分镜生成项目：根据用户输入自动调研涉及的人物、事物与场景，并最终输出按分镜逐格的详细漫画脚本（包含镜头/构图、角色动作与表情、穿着、环境与道具、对话及语气等），不输出调研报告。
|
||||
|
||||
<img src="./app.png" title="Gemini Fullstack LangGraph" alt="Gemini Fullstack LangGraph" width="90%">
|
||||
## 致谢
|
||||
|
||||
## Features
|
||||
- LangGraph 与相关社区生态
|
||||
- Google Gemini 与原生 Google Search 工具
|
||||
- Philipp Schmid 的后端示例与实践贡献
|
||||
|
||||
- 💬 Fullstack application with a React frontend and LangGraph backend.
|
||||
- 🧠 Powered by a LangGraph agent for advanced research and conversational AI.
|
||||
- 🔍 Dynamic search query generation using Google Gemini models.
|
||||
- 🌐 Integrated web research via Google Search API.
|
||||
- 🤔 Reflective reasoning to identify knowledge gaps and refine searches.
|
||||
- 📄 Generates answers with citations from gathered sources.
|
||||
- 🔄 Hot-reloading for both frontend and backend during development.
|
||||
## 许可证说明
|
||||
|
||||
## Project Structure
|
||||
本项目包含来自上游的开源代码，依其原许可证继续保留：
|
||||
|
||||
The project is divided into two main directories:
|
||||
- 根目录：Apache License 2.0（见 `LICENSE`）
|
||||
- `backend/`：MIT License（见 `backend/LICENSE`）
|
||||
|
||||
- `frontend/`: Contains the React application built with Vite.
|
||||
- `backend/`: Contains the LangGraph/FastAPI application, including the research agent logic.
|
||||
此外，项目附带 `NOTICE` 文件，用于归属与感谢。你可以在遵守上述许可证的前提下自由使用与修改本项目。
|
||||
|
||||
## Getting Started: Development and Local Testing
|
||||
## 使用提示（简）
|
||||
|
||||
Follow these steps to get the application running locally for development and testing.
|
||||
- 后端需配置环境变量 `GEMINI_API_KEY`
|
||||
- 开发启动：`make dev`
|
||||
|
||||
**1. Prerequisites:**
|
||||
|
||||
- Node.js and npm (or yarn/pnpm)
|
||||
- Python 3.11+
|
||||
- **`GEMINI_API_KEY`**: The backend agent requires a Google Gemini API key.
|
||||
1. Navigate to the `backend/` directory.
|
||||
2. Create a file named `.env` by copying the `backend/.env.example` file.
|
||||
3. Open the `.env` file and add your Gemini API key: `GEMINI_API_KEY="YOUR_ACTUAL_API_KEY"`
|
||||
|
||||
**2. Install Dependencies:**
|
||||
|
||||
**Backend:**
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
pip install .
|
||||
```
|
||||
|
||||
**Frontend:**
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
**3. Run Development Servers:**
|
||||
|
||||
**Backend & Frontend:**
|
||||
|
||||
```bash
|
||||
make dev
|
||||
```
|
||||
This will run the backend and frontend development servers. Open your browser and navigate to the frontend development server URL (e.g., `http://localhost:5173/app`).
|
||||
|
||||
_Alternatively, you can run the backend and frontend development servers separately. For the backend, open a terminal in the `backend/` directory and run `langgraph dev`. The backend API will be available at `http://127.0.0.1:2024`. It will also open a browser window to the LangGraph UI. For the frontend, open a terminal in the `frontend/` directory and run `npm run dev`. The frontend will be available at `http://localhost:5173`._
|
||||
|
||||
## How the Backend Agent Works (High-Level)
|
||||
|
||||
The core of the backend is a LangGraph agent defined in `backend/src/agent/graph.py`. It follows these steps:
|
||||
|
||||
<img src="./agent.png" title="Agent Flow" alt="Agent Flow" width="50%">
|
||||
|
||||
1. **Generate Initial Queries:** Based on your input, it generates a set of initial search queries using a Gemini model.
|
||||
2. **Web Research:** For each query, it uses the Gemini model with the Google Search API to find relevant web pages.
|
||||
3. **Reflection & Knowledge Gap Analysis:** The agent analyzes the search results to determine if the information is sufficient or if there are knowledge gaps. It uses a Gemini model for this reflection process.
|
||||
4. **Iterative Refinement:** If gaps are found or the information is insufficient, it generates follow-up queries and repeats the web research and reflection steps (up to a configured maximum number of loops).
|
||||
5. **Finalize Answer:** Once the research is deemed sufficient, the agent synthesizes the gathered information into a coherent answer, including citations from the web sources, using a Gemini model.
|
||||
|
||||
## CLI Example
|
||||
|
||||
For quick one-off questions you can execute the agent from the command line. The
|
||||
script `backend/examples/cli_research.py` runs the LangGraph agent and prints the
|
||||
final answer:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
python examples/cli_research.py "What are the latest trends in renewable energy?"
|
||||
```
|
||||
|
||||
|
||||
## Deployment
|
||||
|
||||
In production, the backend server serves the optimized static frontend build. LangGraph requires a Redis instance and a Postgres database. Redis is used as a pub-sub broker to enable streaming real time output from background runs. Postgres is used to store assistants, threads, runs, persist thread state and long term memory, and to manage the state of the background task queue with 'exactly once' semantics. For more details on how to deploy the backend server, take a look at the [LangGraph Documentation](https://langchain-ai.github.io/langgraph/concepts/deployment_options/). Below is an example of how to build a Docker image that includes the optimized frontend build and the backend server and run it via `docker-compose`.
|
||||
|
||||
_Note: For the docker-compose.yml example you need a LangSmith API key, you can get one from [LangSmith](https://smith.langchain.com/settings)._
|
||||
|
||||
_Note: If you are not running the docker-compose.yml example or exposing the backend server to the public internet, you should update the `apiUrl` in the `frontend/src/App.tsx` file to your host. Currently the `apiUrl` is set to `http://localhost:8123` for docker-compose or `http://localhost:2024` for development._
|
||||
|
||||
**1. Build the Docker Image:**
|
||||
|
||||
Run the following command from the **project root directory**:
|
||||
```bash
|
||||
docker build -t gemini-fullstack-langgraph -f Dockerfile .
|
||||
```
|
||||
**2. Run the Production Server:**
|
||||
|
||||
```bash
|
||||
GEMINI_API_KEY=<your_gemini_api_key> LANGSMITH_API_KEY=<your_langsmith_api_key> docker-compose up
|
||||
```
|
||||
|
||||
Open your browser and navigate to `http://localhost:8123/app/` to see the application. The API will be available at `http://localhost:8123`.
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- [React](https://reactjs.org/) (with [Vite](https://vitejs.dev/)) - For the frontend user interface.
|
||||
- [Tailwind CSS](https://tailwindcss.com/) - For styling.
|
||||
- [Shadcn UI](https://ui.shadcn.com/) - For components.
|
||||
- [LangGraph](https://github.com/langchain-ai/langgraph) - For building the backend research agent.
|
||||
- [Google Gemini](https://ai.google.dev/models/gemini) - LLM for query generation, reflection, and answer synthesis.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details.
|
||||
运行后，输入你的创作主题或需求，系统将完成必要调研并输出细化到每一格的漫画分镜脚本。
|
||||
|
||||
Reference in New Issue
Block a user