devmeta commited on
Commit
4a7cfc9
·
verified ·
1 Parent(s): 063da56

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +136 -13
README.md CHANGED
@@ -8,24 +8,147 @@ pinned: false
8
  license: mit
9
  ---
10
 
11
- # Visual Novel Creator Embed
 
12
 
13
- Cloud Run에 배포된 Visual Novel Creator 앱을 iframe으로 임베드한 Hugging Face Space입니다.
 
14
 
15
- 원본 앱: https://service-3-1-596819351328.us-west1.run.app/
16
 
17
- ## 기능
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
 
19
- - 비주얼 노벨 생성 및 편집
20
- - 클라우드 기반 저장소
21
- - 실시간 협업 기능
22
 
23
- ## 사용법
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
 
25
- 이 Space는 Cloud Run에 배포된 앱을 iframe으로 로드합니다. 모든 기능은 원본 앱과 동일하게 작동합니다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
 
27
- ## 기술 스택
28
 
29
- - 프론트엔드: React
30
- - 백엔드: Google Cloud Run
31
- - 배포: Hugging Face Spaces (Static SDK)
 
8
  license: mit
9
  ---
10
 
11
+ # VN-AI Studio
12
+ **AI-Assisted Visual Novel Authoring Tool (Web-Based)**
13
 
14
+ 🚀 Live Demo
15
+ https://huggingface.co/spaces/devmeta/visual-novel-creator-v2
16
 
17
+ VN-AI Studio is a web-based visual novel creation tool that leverages generative AI to reduce the entry barriers of game development—such as story planning, character art creation, and scripting—and enables users to rapidly create, test, and export playable visual novel games.
18
 
19
+ ---
20
+
21
+ ## Overview
22
+
23
+ Creating a visual novel traditionally requires multidisciplinary expertise in writing, illustration, and programming.
24
+ VN-AI Studio introduces an AI-assisted creation workflow that allows creators to focus on narrative structure and experimentation rather than technical implementation.
25
+
26
+ Core philosophy:
27
+
28
+ Generate many playable prototypes quickly, then curate and refine the best result.
29
+
30
+ ---
31
+
32
+ ## Key Features
33
+
34
+ ### AI-Assisted Content Generation
35
+ - Automatic story generation from a simple theme input
36
+ - Character sprite generation with consistent visual style
37
+ - Automatic generation of four emotional expressions (neutral, happy, sad, angry)
38
+ - Background image generation from scene descriptions
39
+ - Automatic background removal using Canvas API and pixel-level chroma key analysis
40
+
41
+ ### Visual Novel Editor
42
+ - Scene creation and deletion
43
+ - Branching narrative structure with choice-based flow
44
+ - Dialogue editing with character and narration support
45
+ - Character management with prompt-based customization
46
+
47
+ ### Scene Tree Visualization
48
+ - Hierarchical scene tree for at-a-glance understanding
49
+ - Clear visualization of cause-and-effect between choices and outcomes
50
+ - Detection of unreachable (orphan) scenes
51
+ - Structural awareness of loops and branching complexity
52
+
53
+ ### Three-Stage Scene Architecture
54
+ 1. Intro (Start Scene)
55
+ 2. Development (Branching Scenes)
56
+ 3. Ending (Result Scenes)
57
+
58
+ This structure guides coherent narrative pacing while preventing uncontrolled branching.
59
+
60
+ ### Play & Export
61
+ - In-browser preview player
62
+ - Standalone HTML export
63
+ - Ren’Py (.rpy) script export
64
+ - JSON-based project backup and restore
65
+
66
+ ---
67
+
68
+ ## Technology Stack
69
+
70
+ - Frontend: React 19
71
+ - Language: TypeScript
72
+ - Styling: Tailwind CSS
73
+ - AI Integration: Google Gemini API
74
+ - gemini-2.5-flash (text)
75
+ - gemini-2.5-flash-image (image)
76
+ - State Management: React Hooks
77
+ - Build Tools: Vite / Webpack
78
+ - Image Processing: HTML Canvas API
79
+
80
+ ---
81
+
82
+ ## System Architecture
83
+
84
+ - Client-side processing only (no backend server)
85
+ - All logic, image processing, and file handling run in the browser
86
+ - Reduced operational cost and improved data privacy
87
+ - Entire project stored as a single JSON object for easy save/load/export
88
+
89
+ ---
90
 
91
+ ## Data Schema (JSON Example)
 
 
92
 
93
+ {
94
+ "title": "String",
95
+ "characters": [
96
+ {
97
+ "id": "UUID",
98
+ "name": "String",
99
+ "expressions": [
100
+ { "id": "UUID", "imageUrl": "Base64" }
101
+ ]
102
+ }
103
+ ],
104
+ "scenes": [
105
+ {
106
+ "id": "UUID",
107
+ "dialogue": [
108
+ { "text": "String", "characterId": "UUID" }
109
+ ],
110
+ "choices": [
111
+ { "text": "String", "nextSceneId": "UUID" }
112
+ ]
113
+ }
114
+ ]
115
+ }
116
 
117
+ ---
118
+
119
+ ## User Workflow
120
+
121
+ 1. Enter a theme and generate a story draft or demo project.
122
+ 2. Configure game settings (title, synopsis, cover image, start scene).
123
+ 3. Add characters and generate or upload expression sprites.
124
+ 4. Review and adjust the branching scene tree.
125
+ 5. Edit scene details: backgrounds, dialogue, and choices.
126
+ 6. Preview the game and export as JSON, HTML, or Ren’Py scripts.
127
+
128
+ ---
129
+
130
+ ## Expected Outcomes
131
+
132
+ - AI-Assisted Creation Support
133
+ Enables non-experts to create playable visual novel games with AI assistance.
134
+
135
+ - Rapid Prototyping
136
+ Quickly visualize and validate narrative ideas during the planning phase.
137
+
138
+ - Iterative Design Optimization
139
+ Generate multiple prototypes and select the most promising one for refinement.
140
+
141
+ - Structure-Oriented Narrative Design
142
+ Scene tree visualization encourages logical and coherent storytelling.
143
+
144
+ - Reduced Development Cost
145
+ Serverless, client-side architecture minimizes infrastructure requirements.
146
+
147
+ - Scalability
148
+ Ren’Py export allows seamless transition from prototype to commercial development.
149
+
150
+ ---
151
 
152
+ ## Credits
153
 
154
+ Created by: Tae-wan Kim