add instruction (#135)

examples/game/assets/instruction/instruction.html

@@ -0,0 +1,96 @@
+<p>游戏设计主要包含<strong>角色设计</strong>和<strong>剧情设计</strong>两部分。</p>
+<h3 id="-">角色设计</h3>
+<p>新角色创建流程如下： </p>
+<ol>
+<li>点击“🆕创建角色”  </li>
+<li>角色配置 </li>
+<li>点击“🛄保存角色” </li>
+</ol>
+<p>一下是如何在角色配置页面配置角色的介绍。</p>
+<h4 id="-">角色基础配置</h4>
+<p><img src={role_1} alt="Screen Shot 2024-02-25 at 8.24.32 PM.png" width="1200"></p>
+<ol>
+<li>角色名称：必须输入，如果有同名，将会覆盖原配置。</li>
+<li>角色头像：支持本地上传和llm生成。</li>
+<li>熟悉程度：【陌生，稍微熟悉，熟悉】该值影响角色对玩家透露的信息程度</li>
+<li>是否开启记忆功能：默认开启</li>
+<li><p>模型设置：即agent调用的模型，支持post_api和tongyi</p>
+<h4 id="-">角色特征设置</h4>
+<p><img src={role_2} alt="Screen Shot 2024-02-25 at 8.29.54 PM.png" width="1200"></p>
+</li>
+<li><p>食物偏好：当该角色出现在“营业环节”，会综合此信息和当天食材生成要求菜品；当玩家搭配出类似的菜品，可以提高该角色熟悉度以使角色透露更多的信息。</p>
+</li>
+<li><p>背景介绍：提供基本的人物认定，会影响人物在游戏中的回答。</p>
+<h4 id="-">角色剧情设置</h4>
+<p><img src={role_3} alt="Screen Shot 2024-02-25 at 8.30.15 PM.png" width="1200">
+线索卡是游戏剧情的核心。</p>
+</li>
+<li><p>【线索卡=剧情】每张线索卡含有该角色在某段剧情中（剧情ID）的视角、想法。</p>
+</li>
+<li>【主角线索卡插入】如果该角色是主角，那所有线索卡会从一开始就插入。</li>
+<li>【配角线索卡插入】如果该角色是配角，玩家需要在“营业环节”做出让该角色满意的菜品，逐步让线索卡插入角色记忆中。（所以设计者需要考虑线索卡的顺序！）</li>
+<li>【线索卡揭露】当玩家和角色对话被判定为包含改线索，线索卡会在游戏界面展示给玩家。</li>
+</ol>
+<h3 id="-">剧情/关卡设计</h3>
+<p>每个剧情由以下环节组成：</p>
+<ol>
+<li>开场</li>
+<li>营业环节</li>
+<li>解密环节</li>
+</ol>
+<p>其中“开场”是固定环节，由玩家和主角交互；
+“营业环节”和“解谜环节”是可选环节。</p>
+<h4 id="-">剧情基本设置</h4>
+<h3 id="-screen-shot-2024-02-25-at-8-51-09-pm-png-https-intranetproxy-alipay-com-skylark-lark-0-2024-png-86356272-1708923078574-ae49ed89-414d-4ef7-b29e-ca5e567fa213-png-clientid-u0db8c6ce-8b29-4-from-drop-id-udd168b20-originheight-531-originwidth-1497-originaltype-binary-ratio-2-rotation-0-showtitle-false-size-140465-status-done-style-none-taskid-u9f291af9-b66f-4ead-b42d-c8ffc6428df-title-"></h3>
+<p><img src={plot_1} alt="Screen Shot 2024-02-25 at 8.51.09 PM.png" width="1200"></p>
+<ol>
+<li>剧情id：用于识别确定剧情，需要是整数数字</li>
+<li>剧情任务：剧情的名字</li>
+<li>尝试次数：最多尝试解答谜题的次数</li>
+<li>配置主角/配置配角：在已经配置好的角色中选择主角/配角。<ol>
+<li>主角会出现在“开场”阶段，交代剧情背景和可以提供玩家的一些关键信息。</li>
+<li>配角会出现在“营业环节”和“解密环节”。</li>
+</ol>
+</li>
+<li>剧情任务:剧情环节可选选择:<ol>
+<li>营业环节：配角出现在营业环节，并且会点菜。配角对菜满意的话，主动揭露一张线索卡，并且和玩家继续对话。</li>
+<li>解密环节：<ol>
+<li>当没有配角的的时候，玩家会进入与主角对话；</li>
+<li>当有配角的时候，玩家可以邀请主角 + 配角进入多角色对话。</li>
+</ol>
+</li>
+</ol>
+</li>
+</ol>
+<h4 id="-">剧情依赖关系</h4>
+<p><img src={plot_2} alt="Screen Shot 2024-02-25 at 10.51.01 PM.png" width="1200"></p>
+<ol>
+<li>配置前置剧情：当前置剧情完成后，当前剧情才可能被激活。</li>
+<li><p>设置解锁剧情：</p>
+<ol>
+<li>默认解锁方式是“always_true” （将来会引入更多判断条件）</li>
+<li>解锁剧情ID：当前剧情成功后，被激活的下一个剧情。<h4 id="-">剧情完成条件/判断</h4>
+<img src={plot_3} alt="Screen Shot 2024-02-25 at 10.55.14 PM.png" width="1200"></li>
+</ol>
+</li>
+<li><p>任务描述：让玩家知道当前剧情的任务主要是什么。同时也会出现在游戏界面的“任务”tab中</p>
+</li>
+<li>剧情完成条件：让LLM来判定玩家的回答、与角色的对话是否满足该条件；如果是，则该任务会被判定完成。</li>
+</ol>
+<p><img src={plot_4} width="1200"></p>
+<h4 id="-">剧情开场阶段设定</h4>
+<p><img src={plot_5} alt="Screen Shot 2024-02-25 at 10.56.00 PM.png" width="1200">
+为了更好控制剧情，开发者应该提供以下信息让玩家更快融入</p>
+<ol>
+<li>开场白</li>
+<li>开场白配图</li>
+<li>主角入场发言</li>
+<li>玩家初始发言提示</li>
+<li>主角退场发言</li>
+</ol>
+<p>对应关系如下图</p>
+<p><img src={plot_6} width="1200"></p>
+<p><img src={plot_7} alt="Screen Shot 2024-02-25 at 11.16.00 PM.png" width="1200"></p>
+<h3 id="-">编剧助手</h3>
+<p>可以通过交互式的编剧助手，辅助生成剧情！
+<img src={builder} alt="Screen Shot 2024-02-25 at 11.23.48 PM.png" width="1200"></p>

examples/game/game_app.py

@@ -600,7 +600,34 @@ def start_game(uid):
                 create_config_tab(config_tab, ver, uuid)
             with dev_tab:
                 # TODO: Zitao, write README here.
-                dev_container = gr.HTML()
+                with open("./assets/instruction/instruction.html") as f:
+                    html_content = f.read()
+                instruction = html_content.format_map({
+                    "role_1": covert_image_to_base64("./assets/instruction/role_1.png"),
+                    "role_2": covert_image_to_base64(
+                        "./assets/instruction/role_2.png"),
+                    "role_3": covert_image_to_base64(
+                        "./assets/instruction/role_3.png"),
+                    "plot_1": covert_image_to_base64(
+                        "./assets/instruction/plot_1.png"),
+                    "plot_2": covert_image_to_base64(
+                        "./assets/instruction/plot_2.png"),
+                    "plot_3": covert_image_to_base64(
+                        "./assets/instruction/plot_3.png"),
+                    "plot_3": covert_image_to_base64(
+                        "./assets/instruction/plot_3.png"),
+                    "plot_4": covert_image_to_base64(
+                        "./assets/instruction/plot_4.png"),
+                    "plot_5": covert_image_to_base64(
+                        "./assets/instruction/plot_5.png"),
+                    "plot_6": covert_image_to_base64(
+                        "./assets/instruction/plot_6.png"),
+                    "plot_7": covert_image_to_base64(
+                        "./assets/instruction/plot_7.png"),
+                    "builder": covert_image_to_base64(
+                        "./assets/instruction/builder.png"),
+                })
+                dev_container = gr.HTML(instruction)
 
         game_tabs = gr.Tabs(visible=False)