fix: show all enabled panels on chat lobby instead of only templates

* feat: update about page examples with new diagrams

Replace old cloud architecture and cat examples with ResNet50, RAG,
Authentication, Agile Scrum, and Open Innovation diagrams.
Update all three language versions (EN, CN, JA) for consistency.

* fix: correct ResNet50 prompt text and keep prompts in English

Update the ResNet50 example prompt to match the actual diagram.
Keep all prompt texts in English across CN and JA about pages
since prompts are what users type into the AI.

* docs: update README examples to match about page

Replace GCP, AWS, Azure examples with ResNet50, RAG, Auth,
Agile Scrum, and Open Innovation. Keep Animated Transformer
and Cat Sketch. Keep prompts in English across all versions.

* docs: remove ResNet50 and Agile Scrum examples from READMEs

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

README.md

@@ -63,24 +63,24 @@ Here are some example prompts and their generated diagrams:
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>GCP architecture diagram</strong><br />
+      <strong>RAG Technique Diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
+      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWS architecture diagram</strong><br />
+      <strong>Authentication using React and AWS</strong><br />
-      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
+      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azure architecture diagram</strong><br />
+      <strong>Open Innovation</strong><br />
-      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
+      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>Cat sketch prompt</strong><br />
+      <strong>Cat sketch</strong><br />
       <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
     </td>

app/[lang]/about/cn/page.tsx

@@ -175,92 +175,106 @@ export default function AboutCN() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* Animated Transformer */}
+                        {/* ResNet50 Architecture */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                动画Transformer连接器
+                                ResNet50模型架构动画
                             </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>提示词：</strong> 给我一个带有
+                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>动画连接器</strong>的Transformer架构图。
+                                <strong>animated</strong> architecture diagram
+                                of the ResNet50 model.
                             </p>
-                            <Image
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                src="/animated_connectors.svg"
+                                <Image
-                                alt="带动画连接器的Transformer架构"
+                                    src="/resnet50.svg"
-                                width={480}
+                                    alt="ResNet50模型架构图"
-                                height={360}
+                                    width={480}
-                                className="mx-auto"
+                                    height={360}
-                            />
+                                    className="mx-auto"
+                                />
+                            </div>
                         </div>
 
-                        {/* Cloud Architecture Grid */}
+                        {/* Diagram Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCP架构图
+                                    RAG技术图
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
+                                    <strong>Prompt:</strong> Generate a RAG
-                                    <strong>GCP图标</strong>
+                                    architecture diagram for{" "}
-                                    生成一个GCP架构图。用户连接到托管在实例上的前端。
+                                    <strong>chat application</strong>. Use
+                                    connected diagram for data ingestion
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/gcp_demo.svg"
+                                    <Image
-                                    alt="GCP架构图"
+                                        src="/rag_prod.svg"
-                                    width={400}
+                                        alt="RAG架构图"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWS架构图
+                                    React和AWS认证流程
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
+                                    <strong>Prompt:</strong> Generate
-                                    <strong>AWS图标</strong>
+                                    authentication process using React with{" "}
-                                    生成一个AWS架构图。用户连接到托管在实例上的前端。
+                                    <strong>AWS</strong>. Use Serverless
+                                    architecture.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/aws_demo.svg"
+                                    <Image
-                                    alt="AWS架构图"
+                                        src="/auth.svg"
-                                    width={400}
+                                        alt="认证架构图"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azure架构图
+                                    敏捷Scrum流程
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
+                                    <strong>Prompt:</strong> Generate agile
-                                    <strong>Azure图标</strong>
+                                    scrum workflow diagram for software
-                                    生成一个Azure架构图。用户连接到托管在实例上的前端。
+                                    development team.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/azure_demo.svg"
+                                    <Image
-                                    alt="Azure架构图"
+                                        src="/agile_scrum.svg"
-                                    width={400}
+                                        alt="敏捷Scrum流程图"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    猫咪素描
+                                    开放式创新
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong>{" "}
+                                    <strong>Prompt:</strong> Create
-                                    给我画一只可爱的猫。
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/cat_demo.svg"
+                                    <Image
-                                    alt="猫咪绘图"
+                                        src="/inno.svg"
-                                    width={240}
+                                        alt="开放式创新图"
-                                    height={240}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/about/ja/page.tsx

@@ -168,93 +168,106 @@ export default function AboutJA() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* Animated Transformer */}
+                        {/* ResNet50 Architecture */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                アニメーションTransformerコネクタ
+                                ResNet50モデルアーキテクチャアニメーション
                             </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>プロンプト：</strong>{" "}
+                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>アニメーションコネクタ</strong>
+                                <strong>animated</strong> architecture diagram
-                                付きのTransformerアーキテクチャ図を作成してください。
+                                of the ResNet50 model.
                             </p>
-                            <Image
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                src="/animated_connectors.svg"
+                                <Image
-                                alt="アニメーションコネクタ付きTransformerアーキテクチャ"
+                                    src="/resnet50.svg"
-                                width={480}
+                                    alt="ResNet50モデルアーキテクチャ図"
-                                height={360}
+                                    width={480}
-                                className="mx-auto"
+                                    height={360}
-                            />
+                                    className="mx-auto"
+                                />
+                            </div>
                         </div>
 
-                        {/* Cloud Architecture Grid */}
+                        {/* Diagram Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCPアーキテクチャ図
+                                    RAG技術ダイアグラム
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Prompt:</strong> Generate a RAG
-                                    <strong>GCPアイコン</strong>
+                                    architecture diagram for{" "}
-                                    を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    <strong>chat application</strong>. Use
+                                    connected diagram for data ingestion
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/gcp_demo.svg"
+                                    <Image
-                                    alt="GCPアーキテクチャ図"
+                                        src="/rag_prod.svg"
-                                    width={400}
+                                        alt="RAGアーキテクチャ図"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWSアーキテクチャ図
+                                    ReactとAWSによる認証
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Prompt:</strong> Generate
-                                    <strong>AWSアイコン</strong>
+                                    authentication process using React with{" "}
-                                    を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    <strong>AWS</strong>. Use Serverless
+                                    architecture.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/aws_demo.svg"
+                                    <Image
-                                    alt="AWSアーキテクチャ図"
+                                        src="/auth.svg"
-                                    width={400}
+                                        alt="認証アーキテクチャ図"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azureアーキテクチャ図
+                                    アジャイルスクラムプロセス
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Prompt:</strong> Generate agile
-                                    <strong>Azureアイコン</strong>
+                                    scrum workflow diagram for software
-                                    を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    development team.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/azure_demo.svg"
+                                    <Image
-                                    alt="Azureアーキテクチャ図"
+                                        src="/agile_scrum.svg"
-                                    width={400}
+                                        alt="アジャイルスクラム図"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    猫のスケッチ
+                                    オープンイノベーション
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Prompt:</strong> Create
-                                    かわいい猫を描いてください。
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/cat_demo.svg"
+                                    <Image
-                                    alt="猫の絵"
+                                        src="/inno.svg"
-                                    width={240}
+                                        alt="オープンイノベーション図"
-                                    height={240}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/about/page.tsx

@@ -182,96 +182,106 @@ export default function About() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* Animated Transformer */}
+                        {/* ResNet50 Architecture */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                Animated Transformer Connectors
+                                Animated ResNet50 Model Architecture
                             </h3>
                             <p className="text-gray-600 mb-4">
                                 <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated connector</strong> diagram of
+                                <strong>animated</strong> architecture diagram
-                                transformer&apos;s architecture.
+                                of the ResNet50 model.
                             </p>
-                            <Image
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                src="/animated_connectors.svg"
+                                <Image
-                                alt="Transformer Architecture with Animated Connectors"
+                                    src="/resnet50.svg"
-                                width={480}
+                                    alt="Architecture diagram for ResNet50 model"
-                                height={360}
+                                    width={480}
-                                className="mx-auto"
+                                    height={360}
-                            />
+                                    className="mx-auto"
+                                />
+                            </div>
                         </div>
 
-                        {/* Cloud Architecture Grid */}
+                        {/* Diagram Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCP Architecture Diagram
+                                    RAG Technique Diagram
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a GCP
+                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram with{" "}
+                                    architecture diagram for{" "}
-                                    <strong>GCP icons</strong>. Users connect to
+                                    <strong>chat application</strong>. Use
-                                    a frontend hosted on an instance.
+                                    connected diagram for data ingestion
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/gcp_demo.svg"
+                                    <Image
-                                    alt="GCP Architecture Diagram"
+                                        src="/rag_prod.svg"
-                                    width={400}
+                                        alt="RAG Architecture Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWS Architecture Diagram
+                                    Authentication using React and AWS
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an AWS
+                                    <strong>Prompt:</strong> Generate
-                                    architecture diagram with{" "}
+                                    authentication process using React with{" "}
-                                    <strong>AWS icons</strong>. Users connect to
+                                    <strong>AWS</strong>. Use Serverless
-                                    a frontend hosted on an instance.
+                                    architecture.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/aws_demo.svg"
+                                    <Image
-                                    alt="AWS Architecture Diagram"
+                                        src="/auth.svg"
-                                    width={400}
+                                        alt="Authentication Architecture Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azure Architecture Diagram
+                                    Agile Scrum Process
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an Azure
+                                    <strong>Prompt:</strong> Generate agile
-                                    architecture diagram with{" "}
+                                    scrum workflow diagram for software
-                                    <strong>Azure icons</strong>. Users connect
+                                    development team.
-                                    to a frontend hosted on an instance.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/azure_demo.svg"
+                                    <Image
-                                    alt="Azure Architecture Diagram"
+                                        src="/agile_scrum.svg"
-                                    width={400}
+                                        alt="Agile Scrum Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Cat Sketch
+                                    Open Innovation
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Draw a cute cat for
+                                    <strong>Prompt:</strong> Create
-                                    me.
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/cat_demo.svg"
+                                    <Image
-                                    alt="Cat Drawing"
+                                        src="/inno.svg"
-                                    width={240}
+                                        alt="Open Innovation Diagram"
-                                    height={240}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>

components/chat/ChatLobby.tsx

@@ -107,8 +107,8 @@ export function ChatLobby({
     currentInput = "",
     dict,
 }: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(false)
+    const [templatesExpanded, setTemplatesExpanded] = useState(true)
-    const [examplesExpanded, setExamplesExpanded] = useState(false)
+    const [examplesExpanded, setExamplesExpanded] = useState(true)
     const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
     const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,19 +125,25 @@ export function ChatLobby({
     const hasHistory = sessions.length > 0
 
     if (!hasHistory) {
-        if (panelVisibility.myTemplates) {
+        if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) {
-            return (
+            return null
-                <TemplatePanel
-                    setInput={setInput}
-                    onSendTemplate={onSendTemplate}
-                    currentInput={currentInput}
-                />
-            )
         }
-        if (panelVisibility.quickExamples) {
+        return (
-            return <ExamplePanel setInput={setInput} setFiles={setFiles} />
+            <div className="animate-fade-in">
-        }
+                {panelVisibility.myTemplates && (
-        return null
+                    <TemplatePanel
+                        setInput={setInput}
+                        onSendTemplate={onSendTemplate}
+                        currentInput={currentInput}
+                    />
+                )}
+                {panelVisibility.quickExamples && (
+                    <div className={panelVisibility.myTemplates ? "mt-6" : ""}>
+                        <ExamplePanel setInput={setInput} setFiles={setFiles} />
+                    </div>
+                )}
+            </div>
+        )
     }
 
     // Show history + collapsible examples when there are sessions

docs/cn/README_CN.md

@@ -56,31 +56,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   <tr>
     <td colspan="2" valign="top" align="center">
       <strong>动画Transformer连接器</strong><br />
-      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
       <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>GCP架构图</strong><br />
+      <strong>RAG技术图</strong><br />
-      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
+      <img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWS架构图</strong><br />
+      <strong>React和AWS认证流程</strong><br />
-      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
+      <img src="../../public/auth.svg" alt="认证架构图" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azure架构图</strong><br />
+      <strong>开放式创新</strong><br />
-      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
+      <img src="../../public/inno.svg" alt="开放式创新图" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫咪素描</strong><br />
-      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
     </td>
   </tr>

docs/ja/README_JA.md

@@ -54,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   <tr>
     <td colspan="2" valign="top" align="center">
       <strong>アニメーションTransformerコネクタ</strong><br />
-      <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
       <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>GCPアーキテクチャ図</strong><br />
+      <strong>RAG技術ダイアグラム</strong><br />
-      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
+      <img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWSアーキテクチャ図</strong><br />
+      <strong>ReactとAWSによる認証</strong><br />
-      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
+      <img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azureアーキテクチャ図</strong><br />
+      <strong>オープンイノベーション</strong><br />
-      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
+      <img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫のスケッチ</strong><br />
-      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
     </td>
   </tr>