diff --git a/src/agentscope/studio/static/i18n/i18n_en.json b/src/agentscope/studio/static/i18n/i18n_en.json
index 31ad390a2..1b6c27d88 100644
--- a/src/agentscope/studio/static/i18n/i18n_en.json
+++ b/src/agentscope/studio/static/i18n/i18n_en.json
@@ -1,226 +1,237 @@
 {
-    "index-Tutorial": "Tutorial",
-    "index-API": "API Document",
-    "index-guide.introduction": "AgentScope Studio is a web-based platform for monitoring, managing and developing multi-agent applications in AgentScope! Feel free to explore the platform and its features.",
-    "index-guide.h2": "Start to explore AgentScope Studio with",
-    "index-guide.DashboardDetail": "Monitor and manage your AgentScope running instances.",
-    "index-guide.WorkstationDetail": "Develop your multi-agent applications by dragging.",
-    "index-guide.GalleryDetail": "Coming soon ...",
-    "index-guide.ServerDetail": "Manage your agent servers (In development).",
-    "dashboard-run-placeholder-Search":"Search",
-    "market-title": "Coming soon ...",
-    "dialogue-detail-dialogue-Nodata":"No messages available.",
-    "dialogue-detail-dialogue-User":"User",
-    "dialogue-detail-dialogue-textarea": "Input message here ...",
-    "dialogue-detail-dialogue-send-btn": "Send",
-    "condition-Operator": "Condition Operator",
-    "condition-TargetValue": "Target Value",
-    "workstation-Example":"Example",
-    "workstation-sidebar-subitem-Agents": "Two Agents",
-    "workstation-sidebar-subitem-Pipeline": "Pipeline",
-    "workstation-sidebar-subitem-Conversation": "Conversation",
-    "workstation-sidebar-subitem-GroupChat": "Group Chat",
-    "workstation-sidebar-item-Workflow": "Workflow",
-    "workstation-sidebar-item-Model": "Model",
-    "workstation-sidebar-item-Message": "Message",
-    "workstation-sidebar-item-Agent": "Agent",
-    "workstation-sidebar-item-Pipeline": "Pipeline",
-    "workstation-sidebar-item-Service": "Service",
-    "workstation-sidebar-item-Tool": "Tool",
-    "workstation-surveyContent": "We want to hear from you",
-    "workstation-surveyContent-Button": "Participation in questionnaire surveys",
-    "workstation-menu-btn-home": "Home",
-    "workstation-menu-btn-download": "Download workflow configuration",
-    "workstation-menu-btn-load": "Load workflow configuration",
-    "workstation-menu-btn-check": "Check the workflow",
-    "workstation-menu-btn-clear": "Clear",
-    "workstation-menu-btn-export": "Export Python code",
-    "workstation-menu-btn-run": "Run the workflow",
-    "workstation-menu-btn-save": "Save workflow",
-    "workstation-menu-btn-workflow": "Load workflow",
-    "agent-broadcast-Copy": "Copy",
-    "agent-broadcast-readme": "An agent that only broadcasts its content",
-    "agent-broadcast-labelName": "Name",
-    "agent-broadcast-labelName-Assistant": "Assistant",
-    "agent-broadcast-content": "content",
-    "agent-dialogagent-Copy": "Copy",
-    "agent-dialogagent-readme": "An dialog agent that can interact with users or other agents.",
-    "agent-dialogagent-labelName": "Name",
-    "agent-dialogagent-labelName-Assistant": "Assistant",
-    "agent-dialogagent-SystemPrompt": "System prompt",
-    "agent-dialogagent-textareaInput-placeholder": "You're an assistant.",
-    "agent-dialogagent-ModelConfigName": "Model config name",
-    "agent-dictdialogagent-Copy": "Copy",
-    "agent-dictdialogagent-readme": "Agent that generates response in a dict format",
-    "agent-dictdialogagent-labelName": "Name",
-    "agent-dictdialogagent-labelName-placeholder": "Assistant",
-    "agent-dictdialogagent-SystemPrompt": "System prompt",
-    "agent-dictdialogagent-SystemPrompt-textarea": "You're an assistant.",
-    "agent-dictdialogagent-ModelConfigName": "Model config name",
-    "agent-dictdialogagent-MaxRetries": "Max retries",
-    "agent-dictdialogagent-labelParse": "Parse function (Optional)",
-    "agent-dictdialogagent-labelFault": "Fault handler (Optional)",
-    "agent-reactagent-copy": "Copy",
-    "agent-reactagent-readme": "Agent for ReAct (reasoning and acting) with tools",
-    "agent-reactagent-labelName": "Name",
-    "agent-reactagent-labelName-Assistant": "Assistant",
-    "agent-reactagent-SystemPrompt": "System prompt",
-    "agent-reactagent-SystemPrompt-textarea": "You're an assistant.",
-    "agent-reactagent-ModelConfigName": "Model config name",
-    "agent-reactagent-Tools": "Tools",
-    "agent-reactagent-add-Service": "Service",
-    "agent-reactagent-Tools-placeholder": "Please click the 'Service' button above to add tools.",
-    "agent-reactagent-iterations": "Max reasoning-acting iterations",
-    "agent-reactagent-Verbose": "Verbose",
-    "agent-texttoimageagent-TextToImageAgent": "TextToImageAgent",
-    "agent-texttoimageagent-Copy": "Copy",
-    "agent-texttoimageagent-readme": "Agent for text to image generation",
-    "agent-texttoimageagent-labelName": "Name",
-    "agent-texttoimageagent-labelName-Assistant": "Assistant",
-    "agent-texttoimageagent-ModelConfigName": "Model config name",
-    "agent-useragent-Copy": "Copy",
-    "agent-useragent-readme": "A proxy agent for user",
-    "agent-useragent-labelName": "Name",
-    "agent-useragent-labelName-placeholder": "User",
-    "message-msg-labelName": "Name",
-    "message-msg-labelName-placeholder": "Host",
-    "message-msg-labelContent": "Content",
-    "message-msg-labelContent-placeholder": "Hello",
-    "message-msg-labelRole": "Role",
-    "message-msg-labelRole-placeholder": "assistant",
-    "message-msg-labelURL": "URL (Optional)",
-    "model-dashscope-chat-readme": "DashScope Chat Configurations (Your API key will NOT be stored and exposed to the website maintainer)",
-    "model-dashscope-chat-labelConfigName": "Config Name",
-    "model-dashscope-chat-labelModelName": "Model Name",
-    "model-dashscope-chat-labelTemperature": "Temperature",
-    "model-dashscope-chat-labelSeed": "Seed",
-    "model-openai-chat-readme": "OpenAI Chat Configurations (Your API key will NOT be stored and exposed to the website maintainer)",
-    "model-openai-chat-labelConfigName": "Config Name",
-    "model-openai-chat-labelModelName": "Model Name",
-    "model-openai-chat-Temperature": "Temperature",
-    "model-openai-chat-Seed": "Seed",
-    "model-openai-chat-Advanced": "Advanced ▼",
-    "model-openai-chat-advanced-box": "Base URL",
-    "model-post-api-chat-readme": "Post API Chat Configuration",
-    "model-post-api-chat-ConfigName": "Config Name",
-    "model-post-api-chat-ModelName": "Model Name",
-    "model-post-api-chat-Temperature": "Temperature",
-    "model-post-api-chat-Seed": "Seed",
-    "model-post-api-chat-API": "API url",
-    "model-post-api-chat-ContentType": "Content-Type",
-    "model-post-api-chat-Authorization": "Authorization",
-    "model-post-api-chat-MessagesKey": "Messages Key",
-    "model-post-api-chat-MessagesKey-placeholder": "messages",
-    "pipeline-forlooppipeline-readme":"A template pipeline for implementing control flow like for-loop",
-    "pipeline-forlooppipeline-MaxLoop": "Max Loop",
-    "pipeline-forlooppipeline-BreakFunction": "Break Function",
-    "pipeline-ifelsepipeline-readme": "A template pipeline for implementing control flow with if-else logic",
-    "pipeline-ifelsepipeline-Condition": "Condition Function",
-    "pipeline-msghub-readme": "MsgHub is used to share messages among a group of agents",
-    "pipeline-msghub-AnnouncementName": "Announcement Name",
-    "pipeline-msghub-AnnouncementName-placeholder": "Host",
-    "pipeline-msghub-AnnouncementContent": "Announcement Content",
-    "pipeline-msghub-AnnouncementContent-placeholder": "Welcome to the group chat!",
-    "pipeline-placeholder-readme":"A placeholder that do nothing",
-    "pipeline-sequentialpipeline-readme": "A template pipeline for implementing sequential logic (<b>from top to bottom</b>)",
-    "pipeline-switchpipeline-readme": "A template pipeline for implementing control flow with switch-case logic",
-    "pipeline-switchpipeline-Condition": "Condition Function",
-    "pipeline-switchpipeline-AddCase": "Add Case",
-    "pipeline-switchpipeline-RemoveCase": "Remove Case",
-    "pipeline-whilelooppipeline-readme": "A template pipeline for implementing control flow like while-loop",
-    "pipeline-whilelooppipeline-Condition": "Condition Function",
-    "service-bing-search-readme": "Integrate the Bing Search service within ReActAgent to enhance agent capabilities",
-    "service-bing-search-Results": "Results Number",
-    "service-execute-python-readme": "Integrate the Python Interpreter within ReActAgent to enhance agent capabilities",
-    "service-google-search-readme": "Integrate the Google Search service within ReActAgent to enhance agent capabilities",
-    "service-read-text-readme": "Integrate the Read Text service within ReActAgent to enhance agent capabilities",
-    "service-write-text-readme": "Integrate the Write Text Service within ReActAgent to enhance agent capabilities",
-    "Welcome-Welcome": "👏 Welcome!",
-    "welcome-Easy-to-use": "Easy-to-use Multi-Agent Platform:",
-    "welcome-Shortkeys": "Shortkeys:",
-    "welcome-Easy-to-Use": "🤝 Easy-to-Use",
-    "welcome-High-Robustness": "✅ High Robustness",
-    "welcome-Actor-Based": "🌐 Actor-Based Distribution",
-    "welcome-Documentations": "Documentations:",
-    "welcome-Quick-Start": "🚀 Quick Start",
-    "welcome-Examples": "💡 Examples",
-    "welcome-Tutorial": " 📘 Tutorial & API Reference",
-    "en1-json-readme": "📖 This is an example of how to program a one-round conversation in AgentScope.",
-    "en1-json-readme-h4": "Modules Used:",
-    "en1-json-readme-sentence1": "- Each application must contain a model configured.",
-    "en1-json-readme-sentence2": "- Represents a user in a application.",
-    "en1-json-readme-sentence3": "- Agent for dialog in an application.",
-    "en2-json-readme": "📖 This example demonstrates a one-round user-ReactAgent (with PythonService) conversation with Sequential Pipeline by AgentScope. ",
-    "en2-json-readme-h4": "Modules Used:",
-    "en2-json-readme-sentence1": "- Each application must contain a model configured.",
-    "en2-json-readme-sentence2": "- Make the message passes in a predefined, sequential order among agents.",
-    "en2-json-readme-sentence3": "- Represents a user in a application.",
-    "en2-json-readme-sentence4": "- An agent class that implements the ReAct algorithm.",
-    "en2-json-readme-sentence5": "- Execute a piece of python code.",
-    "en3-json-readme": "📖 This is a example of how to program a user-agent conversation in AgentScope. ",
-    "en3-json-readme-h4": "Modules Used:",
-    "en3-json-readme-sentence1": "- Each application must contain a model configured.",
-    "en3-json-readme-sentence2": "- Designed to perform repetitive operations.",
-    "en3-json-readme-sentence3": "- Make the message passes in a predefined, sequential order among agents.",
-    "en3-json-readme-sentence4": "- Represents a user in a application.",
-    "en3-json-readme-sentence5": "- Agent for dialog in an application.",
-    "en3-json-readme-moreDetails": "For more details, please see ",
-    "en3-json-readme-moreDetailsHref": "here",
-    "en4-json-readme": "📖 This example demonstrates a multi-agent group chat facilitated by AgentScope.",
-    "en4-json-readme-h4": "Modules Used:",
-    "en4-json-readme-sentence1": "- Each application must contain a model configured.",
-    "en4-json-readme-sentence2": "- MsgHub is where agents share their messages like a group chat.",
-    "en4-json-readme-sentence3": "- Message is flow passing among agents.",
-    "en4-json-readme-sentence4": "- Designed to perform repetitive operations.",
-    "en4-json-readme-sentence5": "- Make the message passes in a predefined, sequential order among agents.",
-    "en4-json-readme-sentence6": "- Represents a user in a application.",
-    "en4-json-readme-sentence7": "- Agent for dialog in an application.",
-    "en4-json-readme-moreDetails": "For more details, please see ",
-    "en4-json-readme-moreDetailsHref": "here",
-    "service-text-to-audio-reademe": "Integrate the Text to Audio Service within ReActAgent to enhance agent capabilities",
-    "service-text-to-audio-modelName": "Model Name",
-    "service-text-to-audio-sampleRate": "Sample Rate",
-    "service-text-to-image-readme": "Integrate the Text to Image Service within ReActAgent to enhance agent capabilities",
-    "service-text-to-image-modelName": "Model Name",
-    "service-text-to-image-numberofImages": "Number of Images",
-    "service-text-to-image-size": "size",
-    "tool-image-synthesis-readme": "Integrate the Text to Image",
-    "tool-image_synthesis-modelName": "Model Name",
-    "tool-image_synthesis-numberofImages": "Number of Images",
-    "tool-image_synthesis-size": "size",
-    "tool-image_synthesis-saveDir": "Save dir",
-    "tool-image-composition-readme": "Composite images into one image",
-    "tool-image-composition-Titles": "Titles",
-    "tool-image-composition-Outputpath": "Output path",
-    "tool-image-composition-row": "Row",
-    "tool-image-composition-Column": "Column",
-    "tool-image-composition-Spacing": "Spacing",
-    "tool-image-composition-titleHeight": "Title height",
-    "tool-image-composition-fontName": "Font name",
-    "tool-image-motion-readme": "Convert an image to an mp4 or a gif by shifting the perspective",
-    "tool-image-motion-outputPath": "Output path",
-    "tool-image-motion-outputFormat": "Output Format",
-    "tool-image-motion-labelDuration": "Duration",
-    "tool-image-motion-labelMotiondirection": "Motion direction",
-    "tool-post-readme": "Post a request and return the response",
-    "tool-post-label-outputPath": "Output path",
-    "tool-post-label-outputtype": "Output type",
-    "tool-video-composition-readme": "Composite videos into one video",
-    "tool-video-composition-outputPath": "Output path",
-    "tool-video-composition-targetVideoWidth": "Target Video Width",
-    "tool-video-composition-targetVideoHeight": "Target Video Height",
-    "tool-video-composition-targetVideoFps": "Target Video Fps",
-    "tool-code-readme": "Execute Python Code",
-    "tool-code-note": "Note:",
-    "tool-code-note-var": "- Input and Output variables must be a Msg or dict object.",
-    "tool-code-note-func": "- Please do not modify the function name.",
-    "tool-code-content": "Code",
-    "workstarionjs-import-prev": "Previous",
-    "workstarionjs-import-next": "Next",
-    "workstarionjs-import-skip": "Skip",
-    "workstarionjs-import-quit": "Quit",
-    "workstarionjs-import-caution": "Caution: You are currently in the tutorial mode where modifications are restricted.",
-    "workstarionjs-import-Caution-click": "Please click",
-    "workstarionjs-import-Caution-quit": "Quit",
-    "workstarionjs-import-Caution-exit": "to exit and start creating your custom multi-agent applications. "
+  "login-page-title": "AgentScope WorkStation Login Page",
+  "login-page-welcome": "Welcome to AgentScope WorkStation",
+  "login-page-terms-title": "Please log in and star the AgentScope repository",
+  "login-page-terms-acknowledgment": "By logging in, you acknowledge that:",
+  "login-page-terms-star": "This service will star🌟 AgentScope repository on your behalf.",
+  "login-page-terms-api": "Your API key will NOT be stored and exposed to the website maintainer.",
+  "login-page-terms-data": "No user data (e.g., drawn workflow) within the service will be saved unless you explicitly choose to save it.",
+  "login-page-terms-agree": "I agree to the terms of service",
+  "login-page-login-github": "Login with GitHub",
+  "login-page-login-guest": "Login as Guest",
+  "login-page-please-wait": "Please wait...",
+  "index-Tutorial": "Tutorial",
+  "index-API": "API Document",
+  "index-guide.introduction": "AgentScope Studio is a web-based platform for monitoring, managing and developing multi-agent applications in AgentScope! Feel free to explore the platform and its features.",
+  "index-guide.h2": "Start to explore AgentScope Studio with",
+  "index-guide.DashboardDetail": "Monitor and manage your AgentScope running instances.",
+  "index-guide.WorkstationDetail": "Develop your multi-agent applications by dragging.",
+  "index-guide.GalleryDetail": "Coming soon ...",
+  "index-guide.ServerDetail": "Manage your agent servers (In development).",
+  "dashboard-run-placeholder-Search": "Search",
+  "market-title": "Coming soon ...",
+  "dialogue-detail-dialogue-Nodata": "No messages available.",
+  "dialogue-detail-dialogue-User": "User",
+  "dialogue-detail-dialogue-textarea": "Input message here ...",
+  "dialogue-detail-dialogue-send-btn": "Send",
+  "condition-Operator": "Condition Operator",
+  "condition-TargetValue": "Target Value",
+  "workstation-Example": "Example",
+  "workstation-sidebar-subitem-Agents": "Two Agents",
+  "workstation-sidebar-subitem-Pipeline": "Pipeline",
+  "workstation-sidebar-subitem-Conversation": "Conversation",
+  "workstation-sidebar-subitem-GroupChat": "Group Chat",
+  "workstation-sidebar-item-Workflow": "Workflow",
+  "workstation-sidebar-item-Model": "Model",
+  "workstation-sidebar-item-Message": "Message",
+  "workstation-sidebar-item-Agent": "Agent",
+  "workstation-sidebar-item-Pipeline": "Pipeline",
+  "workstation-sidebar-item-Service": "Service",
+  "workstation-sidebar-item-Tool": "Tool",
+  "workstation-surveyContent": "We want to hear from you",
+  "workstation-surveyContent-Button": "Participation in questionnaire surveys",
+  "workstation-menu-btn-home": "Home",
+  "workstation-menu-btn-download": "Download workflow configuration",
+  "workstation-menu-btn-load": "Load workflow configuration",
+  "workstation-menu-btn-check": "Check the workflow",
+  "workstation-menu-btn-clear": "Clear",
+  "workstation-menu-btn-export": "Export Python code",
+  "workstation-menu-btn-run": "Run the workflow",
+  "workstation-menu-btn-save": "Save workflow",
+  "workstation-menu-btn-workflow": "Load workflow",
+  "agent-broadcast-Copy": "Copy",
+  "agent-broadcast-readme": "An agent that only broadcasts its content",
+  "agent-broadcast-labelName": "Name",
+  "agent-broadcast-labelName-Assistant": "Assistant",
+  "agent-broadcast-content": "content",
+  "agent-dialogagent-Copy": "Copy",
+  "agent-dialogagent-readme": "An dialog agent that can interact with users or other agents.",
+  "agent-dialogagent-labelName": "Name",
+  "agent-dialogagent-labelName-Assistant": "Assistant",
+  "agent-dialogagent-SystemPrompt": "System prompt",
+  "agent-dialogagent-textareaInput-placeholder": "You're an assistant.",
+  "agent-dialogagent-ModelConfigName": "Model config name",
+  "agent-dictdialogagent-Copy": "Copy",
+  "agent-dictdialogagent-readme": "Agent that generates response in a dict format",
+  "agent-dictdialogagent-labelName": "Name",
+  "agent-dictdialogagent-labelName-placeholder": "Assistant",
+  "agent-dictdialogagent-SystemPrompt": "System prompt",
+  "agent-dictdialogagent-SystemPrompt-textarea": "You're an assistant.",
+  "agent-dictdialogagent-ModelConfigName": "Model config name",
+  "agent-dictdialogagent-MaxRetries": "Max retries",
+  "agent-dictdialogagent-labelParse": "Parse function (Optional)",
+  "agent-dictdialogagent-labelFault": "Fault handler (Optional)",
+  "agent-reactagent-copy": "Copy",
+  "agent-reactagent-readme": "Agent for ReAct (reasoning and acting) with tools",
+  "agent-reactagent-labelName": "Name",
+  "agent-reactagent-labelName-Assistant": "Assistant",
+  "agent-reactagent-SystemPrompt": "System prompt",
+  "agent-reactagent-SystemPrompt-textarea": "You're an assistant.",
+  "agent-reactagent-ModelConfigName": "Model config name",
+  "agent-reactagent-Tools": "Tools",
+  "agent-reactagent-add-Service": "Service",
+  "agent-reactagent-Tools-placeholder": "Please click the 'Service' button above to add tools.",
+  "agent-reactagent-iterations": "Max reasoning-acting iterations",
+  "agent-reactagent-Verbose": "Verbose",
+  "agent-texttoimageagent-TextToImageAgent": "TextToImageAgent",
+  "agent-texttoimageagent-Copy": "Copy",
+  "agent-texttoimageagent-readme": "Agent for text to image generation",
+  "agent-texttoimageagent-labelName": "Name",
+  "agent-texttoimageagent-labelName-Assistant": "Assistant",
+  "agent-texttoimageagent-ModelConfigName": "Model config name",
+  "agent-useragent-Copy": "Copy",
+  "agent-useragent-readme": "A proxy agent for user",
+  "agent-useragent-labelName": "Name",
+  "agent-useragent-labelName-placeholder": "User",
+  "message-msg-labelName": "Name",
+  "message-msg-labelName-placeholder": "Host",
+  "message-msg-labelContent": "Content",
+  "message-msg-labelContent-placeholder": "Hello",
+  "message-msg-labelRole": "Role",
+  "message-msg-labelRole-placeholder": "assistant",
+  "message-msg-labelURL": "URL (Optional)",
+  "model-dashscope-chat-readme": "DashScope Chat Configurations (Your API key will NOT be stored and exposed to the website maintainer)",
+  "model-dashscope-chat-labelConfigName": "Config Name",
+  "model-dashscope-chat-labelModelName": "Model Name",
+  "model-dashscope-chat-labelTemperature": "Temperature",
+  "model-dashscope-chat-labelSeed": "Seed",
+  "model-openai-chat-readme": "OpenAI Chat Configurations (Your API key will NOT be stored and exposed to the website maintainer)",
+  "model-openai-chat-labelConfigName": "Config Name",
+  "model-openai-chat-labelModelName": "Model Name",
+  "model-openai-chat-Temperature": "Temperature",
+  "model-openai-chat-Seed": "Seed",
+  "model-openai-chat-Advanced": "Advanced &#x25BC;",
+  "model-openai-chat-advanced-box": "Base URL",
+  "model-post-api-chat-readme": "Post API Chat Configuration",
+  "model-post-api-chat-ConfigName": "Config Name",
+  "model-post-api-chat-ModelName": "Model Name",
+  "model-post-api-chat-Temperature": "Temperature",
+  "model-post-api-chat-Seed": "Seed",
+  "model-post-api-chat-API": "API url",
+  "model-post-api-chat-ContentType": "Content-Type",
+  "model-post-api-chat-Authorization": "Authorization",
+  "model-post-api-chat-MessagesKey": "Messages Key",
+  "model-post-api-chat-MessagesKey-placeholder": "messages",
+  "pipeline-forlooppipeline-readme": "A template pipeline for implementing control flow like for-loop",
+  "pipeline-forlooppipeline-MaxLoop": "Max Loop",
+  "pipeline-forlooppipeline-BreakFunction": "Break Function",
+  "pipeline-ifelsepipeline-readme": "A template pipeline for implementing control flow with if-else logic",
+  "pipeline-ifelsepipeline-Condition": "Condition Function",
+  "pipeline-msghub-readme": "MsgHub is used to share messages among a group of agents",
+  "pipeline-msghub-AnnouncementName": "Announcement Name",
+  "pipeline-msghub-AnnouncementName-placeholder": "Host",
+  "pipeline-msghub-AnnouncementContent": "Announcement Content",
+  "pipeline-msghub-AnnouncementContent-placeholder": "Welcome to the group chat!",
+  "pipeline-placeholder-readme": "A placeholder that do nothing",
+  "pipeline-sequentialpipeline-readme": "A template pipeline for implementing sequential logic (<b>from top to bottom</b>)",
+  "pipeline-switchpipeline-readme": "A template pipeline for implementing control flow with switch-case logic",
+  "pipeline-switchpipeline-Condition": "Condition Function",
+  "pipeline-switchpipeline-AddCase": "Add Case",
+  "pipeline-switchpipeline-RemoveCase": "Remove Case",
+  "pipeline-whilelooppipeline-readme": "A template pipeline for implementing control flow like while-loop",
+  "pipeline-whilelooppipeline-Condition": "Condition Function",
+  "service-bing-search-readme": "Integrate the Bing Search service within ReActAgent to enhance agent capabilities",
+  "service-bing-search-Results": "Results Number",
+  "service-execute-python-readme": "Integrate the Python Interpreter within ReActAgent to enhance agent capabilities",
+  "service-google-search-readme": "Integrate the Google Search service within ReActAgent to enhance agent capabilities",
+  "service-read-text-readme": "Integrate the Read Text service within ReActAgent to enhance agent capabilities",
+  "service-write-text-readme": "Integrate the Write Text Service within ReActAgent to enhance agent capabilities",
+  "Welcome-Welcome": "👏 Welcome!",
+  "welcome-Easy-to-use": "Easy-to-use Multi-Agent Platform:",
+  "welcome-Shortkeys": "Shortkeys:",
+  "welcome-Easy-to-Use": "🤝 Easy-to-Use",
+  "welcome-High-Robustness": "✅ High Robustness",
+  "welcome-Actor-Based": "🌐 Actor-Based Distribution",
+  "welcome-Documentations": "Documentations:",
+  "welcome-Quick-Start": "🚀 Quick Start",
+  "welcome-Examples": "💡 Examples",
+  "welcome-Tutorial": " 📘 Tutorial & API Reference",
+  "en1-json-readme": "📖 This is an example of how to program a one-round conversation in AgentScope.",
+  "en1-json-readme-h4": "Modules Used:",
+  "en1-json-readme-sentence1": "- Each application must contain a model configured.",
+  "en1-json-readme-sentence2": "- Represents a user in a application.",
+  "en1-json-readme-sentence3": "- Agent for dialog in an application.",
+  "en2-json-readme": "📖 This example demonstrates a one-round user-ReactAgent (with PythonService) conversation with Sequential Pipeline by AgentScope. ",
+  "en2-json-readme-h4": "Modules Used:",
+  "en2-json-readme-sentence1": "- Each application must contain a model configured.",
+  "en2-json-readme-sentence2": "- Make the message passes in a predefined, sequential order among agents.",
+  "en2-json-readme-sentence3": "- Represents a user in a application.",
+  "en2-json-readme-sentence4": "- An agent class that implements the ReAct algorithm.",
+  "en2-json-readme-sentence5": "- Execute a piece of python code.",
+  "en3-json-readme": "📖 This is a example of how to program a user-agent conversation in AgentScope. ",
+  "en3-json-readme-h4": "Modules Used:",
+  "en3-json-readme-sentence1": "- Each application must contain a model configured.",
+  "en3-json-readme-sentence2": "- Designed to perform repetitive operations.",
+  "en3-json-readme-sentence3": "- Make the message passes in a predefined, sequential order among agents.",
+  "en3-json-readme-sentence4": "- Represents a user in a application.",
+  "en3-json-readme-sentence5": "- Agent for dialog in an application.",
+  "en3-json-readme-moreDetails": "For more details, please see ",
+  "en3-json-readme-moreDetailsHref": "here",
+  "en4-json-readme": "📖 This example demonstrates a multi-agent group chat facilitated by AgentScope.",
+  "en4-json-readme-h4": "Modules Used:",
+  "en4-json-readme-sentence1": "- Each application must contain a model configured.",
+  "en4-json-readme-sentence2": "- MsgHub is where agents share their messages like a group chat.",
+  "en4-json-readme-sentence3": "- Message is flow passing among agents.",
+  "en4-json-readme-sentence4": "- Designed to perform repetitive operations.",
+  "en4-json-readme-sentence5": "- Make the message passes in a predefined, sequential order among agents.",
+  "en4-json-readme-sentence6": "- Represents a user in a application.",
+  "en4-json-readme-sentence7": "- Agent for dialog in an application.",
+  "en4-json-readme-moreDetails": "For more details, please see ",
+  "en4-json-readme-moreDetailsHref": "here",
+  "service-text-to-audio-reademe": "Integrate the Text to Audio Service within ReActAgent to enhance agent capabilities",
+  "service-text-to-audio-modelName": "Model Name",
+  "service-text-to-audio-sampleRate": "Sample Rate",
+  "service-text-to-image-readme": "Integrate the Text to Image Service within ReActAgent to enhance agent capabilities",
+  "service-text-to-image-modelName": "Model Name",
+  "service-text-to-image-numberofImages": "Number of Images",
+  "service-text-to-image-size": "size",
+  "tool-image-synthesis-readme": "Integrate the Text to Image",
+  "tool-image_synthesis-modelName": "Model Name",
+  "tool-image_synthesis-numberofImages": "Number of Images",
+  "tool-image_synthesis-size": "size",
+  "tool-image_synthesis-saveDir": "Save dir",
+  "tool-image-composition-readme": "Composite images into one image",
+  "tool-image-composition-Titles": "Titles",
+  "tool-image-composition-Outputpath": "Output path",
+  "tool-image-composition-row": "Row",
+  "tool-image-composition-Column": "Column",
+  "tool-image-composition-Spacing": "Spacing",
+  "tool-image-composition-titleHeight": "Title height",
+  "tool-image-composition-fontName": "Font name",
+  "tool-image-motion-readme": "Convert an image to an mp4 or a gif by shifting the perspective",
+  "tool-image-motion-outputPath": "Output path",
+  "tool-image-motion-outputFormat": "Output Format",
+  "tool-image-motion-labelDuration": "Duration",
+  "tool-image-motion-labelMotiondirection": "Motion direction",
+  "tool-post-readme": "Post a request and return the response",
+  "tool-post-label-outputPath": "Output path",
+  "tool-post-label-outputtype": "Output type",
+  "tool-video-composition-readme": "Composite videos into one video",
+  "tool-video-composition-outputPath": "Output path",
+  "tool-video-composition-targetVideoWidth": "Target Video Width",
+  "tool-video-composition-targetVideoHeight": "Target Video Height",
+  "tool-video-composition-targetVideoFps": "Target Video Fps",
+  "tool-code-readme": "Execute Python Code",
+  "tool-code-note": "Note:",
+  "tool-code-note-var": "- Input and Output variables must be a Msg or dict object.",
+  "tool-code-note-func": "- Please do not modify the function name.",
+  "tool-code-content": "Code",
+  "workstarionjs-import-prev": "Previous",
+  "workstarionjs-import-next": "Next",
+  "workstarionjs-import-skip": "Skip",
+  "workstarionjs-import-quit": "Quit",
+  "workstarionjs-import-caution": "Caution: You are currently in the tutorial mode where modifications are restricted.",
+  "workstarionjs-import-Caution-click": "Please click",
+  "workstarionjs-import-Caution-quit": "Quit",
+  "workstarionjs-import-Caution-exit": "to exit and start creating your custom multi-agent applications. "
 }
diff --git a/src/agentscope/studio/static/i18n/i18n_zh.json b/src/agentscope/studio/static/i18n/i18n_zh.json
index 055dfd566..1f4a68847 100644
--- a/src/agentscope/studio/static/i18n/i18n_zh.json
+++ b/src/agentscope/studio/static/i18n/i18n_zh.json
@@ -1,226 +1,237 @@
 {
-    "index-Tutorial": "教程",
-    "index-API": "API 文档",
-    "index-guide.introduction": "AgentScope Studio 是一个基于 Web 的平台，用于在 AgentScope 中监控、管理和开发多智能体应用程序！请随意探索该平台及其功能",
-    "index-guide.h2": "开始探索 AgentScope Studio",
-    "index-guide.DashboardDetail": "监控和管理您的 AgentScope 运行实例.",
-    "index-guide.WorkstationDetail": "通过拖动来开发您的多智能体应用程序。",
-    "index-guide.GalleryDetail": "即将推出 ...",
-    "index-guide.ServerDetail": "管理您的智能体服务器（开发中）。",
-    "market-title": "即将推出 ...",
-    "dashboard-run-placeholder-Search":"查询",
-    "dialogue-detail-dialogue-Nodata":"无可用消息",
-    "dialogue-detail-dialogue-User":"用户",
-    "dialogue-detail-dialogue-textarea": "在此输入消息...",
-    "dialogue-detail-dialogue-send-btn": "发送",
-    "condition-Operator": "条件运算",
-    "condition-TargetValue": "目标值",
-    "workstation-Example":"示例",
-    "workstation-sidebar-subitem-Agents": "两个智能体",
-    "workstation-sidebar-subitem-Pipeline": "流程",
-    "workstation-sidebar-subitem-Conversation": "会话",
-    "workstation-sidebar-subitem-GroupChat": "群聊",
-    "workstation-sidebar-item-Workflow": "工作流",
-    "workstation-sidebar-item-Model": "模型",
-    "workstation-sidebar-item-Message": "消息",
-    "workstation-sidebar-item-Agent": "智能体",
-    "workstation-sidebar-item-Pipeline": "流程",
-    "workstation-sidebar-item-Service": "服务",
-    "workstation-sidebar-item-Tool": "工具",
-    "workstation-surveyContent": "我们希望听到您的意见",
-    "workstation-surveyContent-Button": "参与问卷调查",
-    "workstation-menu-btn-home": "家",
-    "workstation-menu-btn-download": "下载工作流配置",
-    "workstation-menu-btn-load": "加载工作流配置",
-    "workstation-menu-btn-check": "检查工作流程",
-    "workstation-menu-btn-clear": "清除",
-    "workstation-menu-btn-export": "导出 Python 代码",
-    "workstation-menu-btn-run": "运行工作流",
-    "workstation-menu-btn-save": "保存工作流",
-    "workstation-menu-btn-workflow": "加载工作流",
-    "agent-broadcast-Copy": "复制",
-    "agent-broadcast-readme": "只会广播其内容框中文本的智能体",
-    "agent-broadcast-labelName": "名称",
-    "agent-broadcast-labelName-Assistant": "助理",
-    "agent-broadcast-content": "内容",
-    "agent-dialogagent-Copy": "复制",
-    "agent-dialogagent-readme": "可与用户或其他智能体互动的对话智能体。",
-    "agent-dialogagent-labelName": "名称",
-    "agent-dialogagent-labelName-Assistant": "助理",
-    "agent-dialogagent-SystemPrompt": "系统提示",
-    "agent-dialogagent-textareaInput-placeholder": "你是助理。",
-    "agent-dialogagent-ModelConfigName": "模型配置名称",
-    "agent-dictdialogagent-Copy": "复制",
-    "agent-dictdialogagent-readme": "生成字典格式响应的智能体",
-    "agent-dictdialogagent-labelName": "名称",
-    "agent-dictdialogagent-labelName-placeholder": "助理",
-    "agent-dictdialogagent-SystemPrompt": "系统提示",
-    "agent-dictdialogagent-SystemPrompt-textarea": "你是助理。",
-    "agent-dictdialogagent-ModelConfigName": "模型配置名称",
-    "agent-dictdialogagent-MaxRetries": "最大重试次数",
-    "agent-dictdialogagent-labelParse": "解析函数（可选）",
-    "agent-dictdialogagent-labelFault": "故障处理程序（可选）",
-    "agent-reactagent-copy": "复制",
-    "agent-reactagent-readme": "带有工具的 ReAct（推理和行动）智能体",
-    "agent-reactagent-labelName": "名称",
-    "agent-reactagent-labelName-Assistant": "助理",
-    "agent-reactagent-SystemPrompt": "系统提示",
-    "agent-reactagent-SystemPrompt-textarea": "你是一个助理。",
-    "agent-reactagent-ModelConfigName": "模型配置名称",
-    "agent-reactagent-Tools": "工具",
-    "agent-reactagent-add-Service": "服务",
-    "agent-reactagent-Tools-placeholder": "请点击上方的 '服务' 按钮添加工具。",
-    "agent-reactagent-iterations": "最大推理迭代次数",
-    "agent-reactagent-Verbose": "详细",
-    "agent-texttoimageagent-TextToImageAgent": "文本转图像智能体",
-    "agent-texttoimageagent-Copy": "复制",
-    "agent-texttoimageagent-readme": "文本到图像生成智能体",
-    "agent-texttoimageagent-labelName": "名称",
-    "agent-texttoimageagent-labelName-Assistant": "助理",
-    "agent-texttoimageagent-ModelConfigName": "模型配置名称",
-    "agent-useragent-Copy": "复制",
-    "agent-useragent-readme": "用户的智能体服务器",
-    "agent-useragent-labelName": "名称",
-    "agent-useragent-labelName-placeholder": "用户",
-    "message-msg-labelName": "名称",
-    "message-msg-labelName-placeholder": "主持人",
-    "message-msg-labelContent": "内容",
-    "message-msg-labelContent-placeholder": "你好",
-    "message-msg-labelRole": "角色",
-    "message-msg-labelRole-placeholder": "assistant",
-    "message-msg-labelURL": "网址（可选）",
-    "model-dashscope-chat-readme": "DashScope 聊天配置（您的 API 密钥不会被存储或暴露给网站维护者）",
-    "model-dashscope-chat-labelConfigName": "配置名称",
-    "model-dashscope-chat-labelModelName": "模型名称",
-    "model-dashscope-chat-labelTemperature": "温度",
-    "model-dashscope-chat-labelSeed": "种子",
-    "model-openai-chat-readme": "OpenAI 聊天配置（您的 API 密钥不会被保存或暴露给网站维护者",
-    "model-openai-chat-labelConfigName": "配置名称",
-    "model-openai-chat-labelModelName": "模型名称",
-    "model-openai-chat-Temperature": "温度",
-    "model-openai-chat-Seed": "种子",
-    "model-openai-chat-Advanced": "高级 &#x25BC;",
-    "model-openai-chat-advanced-box": "基准 URL",
-    "model-post-api-chat-readme": "Post API 聊天配置",
-    "model-post-api-chat-ConfigName": "配置名称",
-    "model-post-api-chat-ModelName": "模型名称",
-    "model-post-api-chat-Temperature": "温度",
-    "model-post-api-chat-Seed": "种子",
-    "model-post-api-chat-API": "API 地址",
-    "model-post-api-chat-ContentType": "Content-Type",
-    "model-post-api-chat-Authorization": "授权",
-    "model-post-api-chat-MessagesKey": "Messages Key",
-    "model-post-api-chat-MessagesKey-placeholder": "消息",
-    "pipeline-forlooppipeline-readme":"用于实现 for 循环等控制流的模板流程",
-    "pipeline-forlooppipeline-MaxLoop": "最大循环次数",
-    "pipeline-forlooppipeline-BreakFunction": "中断函数",
-    "pipeline-ifelsepipeline-readme": "用 if-else 逻辑实现控制流的模板流程",
-    "pipeline-ifelsepipeline-Condition": "条件函数",
-    "pipeline-msghub-readme": "MsgHub 用于在一组智能体之间共享信息",
-    "pipeline-msghub-AnnouncementName": "公告名称",
-    "pipeline-msghub-AnnouncementName-placeholder": "host",
-    "pipeline-msghub-AnnouncementContent": "公告内容",
-    "pipeline-msghub-AnnouncementContent-placeholder": "欢迎加入群聊!",
-    "pipeline-placeholder-readme":"不执行任何操作的占位符",
-    "pipeline-sequentialpipeline-readme": "实现顺序逻辑的模板流程（<b>从上到下</b>）",
-    "pipeline-switchpipeline-readme": "用于使用 switch-case 逻辑实现控制流的模板流程",
-    "pipeline-switchpipeline-Condition": "条件函数",
-    "pipeline-switchpipeline-AddCase": "添加案例",
-    "pipeline-switchpipeline-RemoveCase": "删除案例",
-    "pipeline-whilelooppipeline-readme": "用于实现 while 循环等控制流的模板流程",
-    "pipeline-whilelooppipeline-Condition": "条件函数",
-    "service-bing-search-readme": "在 ReActAgent 中集成必应搜索服务，以增强智能体功能",
-    "service-bing-search-Results": "结果编号",
-    "service-execute-python-readme": "在 ReActAgent中集成 Python 解释器，以增强智能体功能",
-    "service-google-search-readme": "将 Google 搜索服务集成到 ReActAgent 中以增强智能体功能",
-    "service-read-text-readme": "将阅读文本服务集成到 ReActAgent 中以增强智能体功能",
-    "service-write-text-readme": "将写入文本服务集成到 ReActAgent 中提升智能体能力",
-    "Welcome-Welcome":"👏 欢迎!",
-    "welcome-Easy-to-use": "易于使用的多智能体平台：",
-    "welcome-Shortkeys": "要点:",
-    "welcome-Easy-to-Use": "🤝 易于使用",
-    "welcome-High-Robustness": "✅ 高鲁棒性",
-    "welcome-Actor-Based": "🌐 基于Actor模型的分布式",
-    "welcome-Documentations": "文档:",
-    "welcome-Quick-Start": "🚀 快速入门",
-    "welcome-Examples": "💡 例子",
-    "welcome-Tutorial": " 📘 教程和 API 参考",
-    "en1-json-readme": "📖 这是如何在 AgentScope 中编写单轮对话的示例",
-    "en1-json-readme-h4": "模块用于:",
-    "en1-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
-    "en1-json-readme-sentence2": "- 代表应用程序中的用户。",
-    "en1-json-readme-sentence3": "- 应用程序中的对话智能体。",
-    "en2-json-readme": "📖 此示例演示了通过 AgentScope 与 Sequential Pipeline 进行的一轮用户 ReactAgent（使用 PythonService）对话",
-    "en2-json-readme-h4": "模块用于:",
-    "en2-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
-    "en2-json-readme-sentence2": "- 使信息按预定顺序在智能体之间传递。",
-    "en2-json-readme-sentence3": "- 代表应用程序中的用户。",
-    "en2-json-readme-sentence4": "- 实现 ReAct 算法的智能体类。",
-    "en2-json-readme-sentence5": "- 执行一段 python 代码。",
-    "en3-json-readme": "📖 这是如何在 AgentScope 中对用户智能体对话进行编程的示例。 ",
-    "en3-json-readme-h4": "模块用于:",
-    "en3-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
-    "en3-json-readme-sentence2": "- 设计用于执行重复性操作。",
-    "en3-json-readme-sentence3": "- 使信息按预定顺序在智能体之间传递。",
-    "en3-json-readme-sentence4": "- 代表应用程序中的用户。",
-    "en3-json-readme-sentence5": "- 应用程序中的对话智能体。",
-    "en3-json-readme-moreDetails": "更多详情，请参阅",
-    "en3-json-readme-moreDetailsHref": "此处",
-    "en4-json-readme": "📖 此例演示了 AgentScope 推动的多智能体群组聊天",
-    "en4-json-readme-h4": "模块用于:",
-    "en4-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
-    "en4-json-readme-sentence2": "- MsgHub 是智能体像群聊一样分享信息的地方",
-    "en4-json-readme-sentence3": "- 信息在智能体之间流动传递。",
-    "en4-json-readme-sentence4": "- 设计用于执行重复性操作。",
-    "en4-json-readme-sentence5": "- 使信息按预定顺序在智能体之间传递。",
-    "en4-json-readme-sentence6": "- 代表应用程序中的用户。",
-    "en4-json-readme-sentence7": "- 应用程序中的对话智能体。",
-    "en4-json-readme-moreDetails": "更多详情，请参阅",
-    "en4-json-readme-moreDetailsHref": "此处",
-    "service-text-to-audio-reademe": "将文本转音频服务集成到 ReActAgent 中以增强智能体功能",
-    "service-text-to-audio-modelName": "模型名称",
-    "service-text-to-audio-sampleRate": "采样率",
-    "service-text-to-image-modelName": "模型名称",
-    "service-text-to-image-numberofImages": "图片数量",
-    "service-text-to-image-size": "图片尺寸",
-    "service-text-to-image-readme": "将文本转图像服务集成到 ReActAgent 中以增强智能体功能",
-    "tool-image-synthesis-readme": "文本生成图片",
-    "tool-image_synthesis-modelName": "模型名称",
-    "tool-image_synthesis-numberofImages": "图片数量",
-    "tool-image_synthesis-size": "图片尺寸",
-    "tool-image_synthesis-saveDir": "保存目录",
-    "tool-image-composition-readme": "将多张图片合成一张",
-    "tool-image-composition-Titles": "标题",
-    "tool-image-composition-Outputpath": "输出路径",
-    "tool-image-composition-row": "行",
-    "tool-image-composition-Column": "列",
-    "tool-image-composition-Spacing": "间距",
-    "tool-image-composition-titleHeight": "标题高度",
-    "tool-image-composition-fontName": "字体名称",
-    "tool-image-motion-readme": "通过视角移动将图片转化为mp4或者gif格式",
-    "tool-image-motion-outputPath": "输出路径",
-    "tool-image-motion-outputFormat": "输出格式",
-    "tool-image-motion-labelDuration": "持续时间",
-    "tool-image-motion-labelMotiondirection": "运动方向",
-    "tool-post-readme": "提交Post请求并返回结果",
-    "tool-post-label-outputPath": "输出路径",
-    "tool-post-label-outputtype": "输出类型",
-    "tool-video-composition-readme": "将多个视频合成一个",
-    "tool-video-composition-outputPath": "输出路径",
-    "tool-video-composition-targetVideoWidth": "目标视频宽度",
-    "tool-video-composition-targetVideoHeight": "目标视频高度",
-    "tool-video-composition-targetVideoFps": "目标视频帧率",
-    "tool-code-readme": "执行Python代码",
-    "tool-code-note": "注意:",
-    "tool-code-note-var": "- 输入和输出参数必须是Msg或者dict对象。",
-    "tool-code-note-func": "- 请勿修改函数名称。",
-    "tool-code-content": "代码",
-    "workstarionjs-import-prev": "上一步",
-    "workstarionjs-import-next": "下一步",
-    "workstarionjs-import-skip": "跳过",
-    "workstarionjs-import-quit": "退出",
-    "workstarionjs-import-caution": "注意：您当前处于教程模式，修改受到限制。",
-    "workstarionjs-import-Caution-click": "请单击",
-    "workstarionjs-import-Caution-quit": "退出",
-    "workstarionjs-import-Caution-exit": "退出并开始创建自定义多代理应用程序。"
+  "login-page-title": "AgentScope WorkStation 登陆页",
+  "login-page-welcome": "欢迎来到AgentScope工作站",
+  "login-page-terms-title": "请登录并为AgentScope仓库点星",
+  "login-page-terms-acknowledgment": "通过登录，您知晓并同意：",
+  "login-page-terms-star": "使用该服务将代表您自愿为AgentScope仓库点星🌟。",
+  "login-page-terms-api": "您的API密钥不会被存储和暴露给网站维护者。",
+  "login-page-terms-data": "除非你明确选择保存，否则本网站不会保存任何用户数据（如绘制的工作流程）。",
+  "login-page-terms-agree": "我同意服务条款",
+  "login-page-login-github": "使用GitHub登陆",
+  "login-page-login-guest": "游客登陆",
+  "login-page-please-wait": "请稍后...",
+  "index-Tutorial": "教程",
+  "index-API": "API 文档",
+  "index-guide.introduction": "AgentScope Studio 是一个基于 Web 的平台，用于在 AgentScope 中监控、管理和开发多智能体应用程序！请随意探索该平台及其功能",
+  "index-guide.h2": "开始探索 AgentScope Studio",
+  "index-guide.DashboardDetail": "监控和管理您的 AgentScope 运行实例.",
+  "index-guide.WorkstationDetail": "通过拖动来开发您的多智能体应用程序。",
+  "index-guide.GalleryDetail": "即将推出 ...",
+  "index-guide.ServerDetail": "管理您的智能体服务器（开发中）。",
+  "market-title": "即将推出 ...",
+  "dashboard-run-placeholder-Search": "查询",
+  "dialogue-detail-dialogue-Nodata": "无可用消息",
+  "dialogue-detail-dialogue-User": "用户",
+  "dialogue-detail-dialogue-textarea": "在此输入消息...",
+  "dialogue-detail-dialogue-send-btn": "发送",
+  "condition-Operator": "条件运算",
+  "condition-TargetValue": "目标值",
+  "workstation-Example": "示例",
+  "workstation-sidebar-subitem-Agents": "两个智能体",
+  "workstation-sidebar-subitem-Pipeline": "流程",
+  "workstation-sidebar-subitem-Conversation": "会话",
+  "workstation-sidebar-subitem-GroupChat": "群聊",
+  "workstation-sidebar-item-Workflow": "工作流",
+  "workstation-sidebar-item-Model": "模型",
+  "workstation-sidebar-item-Message": "消息",
+  "workstation-sidebar-item-Agent": "智能体",
+  "workstation-sidebar-item-Pipeline": "流程",
+  "workstation-sidebar-item-Service": "服务",
+  "workstation-sidebar-item-Tool": "工具",
+  "workstation-surveyContent": "我们希望听到您的反馈",
+  "workstation-surveyContent-Button": "参与问卷调查",
+  "workstation-menu-btn-home": "主页",
+  "workstation-menu-btn-download": "下载工作流配置",
+  "workstation-menu-btn-load": "加载工作流配置",
+  "workstation-menu-btn-check": "检查工作流程",
+  "workstation-menu-btn-clear": "清除",
+  "workstation-menu-btn-export": "导出 Python 代码",
+  "workstation-menu-btn-run": "运行工作流",
+  "workstation-menu-btn-save": "保存工作流",
+  "workstation-menu-btn-workflow": "加载工作流",
+  "agent-broadcast-Copy": "复制",
+  "agent-broadcast-readme": "只会广播其内容框中文本的智能体",
+  "agent-broadcast-labelName": "名称",
+  "agent-broadcast-labelName-Assistant": "助理",
+  "agent-broadcast-content": "内容",
+  "agent-dialogagent-Copy": "复制",
+  "agent-dialogagent-readme": "可与用户或其他智能体互动的对话智能体。",
+  "agent-dialogagent-labelName": "名称",
+  "agent-dialogagent-labelName-Assistant": "助理",
+  "agent-dialogagent-SystemPrompt": "系统提示",
+  "agent-dialogagent-textareaInput-placeholder": "你是助理。",
+  "agent-dialogagent-ModelConfigName": "模型配置名称",
+  "agent-dictdialogagent-Copy": "复制",
+  "agent-dictdialogagent-readme": "生成字典格式响应的智能体",
+  "agent-dictdialogagent-labelName": "名称",
+  "agent-dictdialogagent-labelName-placeholder": "助理",
+  "agent-dictdialogagent-SystemPrompt": "系统提示",
+  "agent-dictdialogagent-SystemPrompt-textarea": "你是助理。",
+  "agent-dictdialogagent-ModelConfigName": "模型配置名称",
+  "agent-dictdialogagent-MaxRetries": "最大重试次数",
+  "agent-dictdialogagent-labelParse": "解析函数（可选）",
+  "agent-dictdialogagent-labelFault": "故障处理程序（可选）",
+  "agent-reactagent-copy": "复制",
+  "agent-reactagent-readme": "带有工具的 ReAct（推理和行动）智能体",
+  "agent-reactagent-labelName": "名称",
+  "agent-reactagent-labelName-Assistant": "助理",
+  "agent-reactagent-SystemPrompt": "系统提示",
+  "agent-reactagent-SystemPrompt-textarea": "你是一个助理。",
+  "agent-reactagent-ModelConfigName": "模型配置名称",
+  "agent-reactagent-Tools": "工具",
+  "agent-reactagent-add-Service": "服务",
+  "agent-reactagent-Tools-placeholder": "请点击上方的 '服务' 按钮添加工具。",
+  "agent-reactagent-iterations": "最大推理迭代次数",
+  "agent-reactagent-Verbose": "详细",
+  "agent-texttoimageagent-TextToImageAgent": "文本转图像智能体",
+  "agent-texttoimageagent-Copy": "复制",
+  "agent-texttoimageagent-readme": "文本到图像生成智能体",
+  "agent-texttoimageagent-labelName": "名称",
+  "agent-texttoimageagent-labelName-Assistant": "助理",
+  "agent-texttoimageagent-ModelConfigName": "模型配置名称",
+  "agent-useragent-Copy": "复制",
+  "agent-useragent-readme": "用户的智能体服务器",
+  "agent-useragent-labelName": "名称",
+  "agent-useragent-labelName-placeholder": "用户",
+  "message-msg-labelName": "名称",
+  "message-msg-labelName-placeholder": "主持人",
+  "message-msg-labelContent": "内容",
+  "message-msg-labelContent-placeholder": "你好",
+  "message-msg-labelRole": "角色",
+  "message-msg-labelRole-placeholder": "assistant",
+  "message-msg-labelURL": "网址（可选）",
+  "model-dashscope-chat-readme": "DashScope 聊天配置（您的 API 密钥不会被存储或暴露给网站维护者）",
+  "model-dashscope-chat-labelConfigName": "配置名称",
+  "model-dashscope-chat-labelModelName": "模型名称",
+  "model-dashscope-chat-labelTemperature": "温度",
+  "model-dashscope-chat-labelSeed": "种子",
+  "model-openai-chat-readme": "OpenAI 聊天配置（您的 API 密钥不会被保存或暴露给网站维护者",
+  "model-openai-chat-labelConfigName": "配置名称",
+  "model-openai-chat-labelModelName": "模型名称",
+  "model-openai-chat-Temperature": "温度",
+  "model-openai-chat-Seed": "种子",
+  "model-openai-chat-Advanced": "高级 &#x25BC;",
+  "model-openai-chat-advanced-box": "基准 URL",
+  "model-post-api-chat-readme": "Post API 聊天配置",
+  "model-post-api-chat-ConfigName": "配置名称",
+  "model-post-api-chat-ModelName": "模型名称",
+  "model-post-api-chat-Temperature": "温度",
+  "model-post-api-chat-Seed": "种子",
+  "model-post-api-chat-API": "API 地址",
+  "model-post-api-chat-ContentType": "Content-Type",
+  "model-post-api-chat-Authorization": "授权",
+  "model-post-api-chat-MessagesKey": "Messages Key",
+  "model-post-api-chat-MessagesKey-placeholder": "消息",
+  "pipeline-forlooppipeline-readme": "用于实现 for 循环等控制流的模板流程",
+  "pipeline-forlooppipeline-MaxLoop": "最大循环次数",
+  "pipeline-forlooppipeline-BreakFunction": "中断函数",
+  "pipeline-ifelsepipeline-readme": "用 if-else 逻辑实现控制流的模板流程",
+  "pipeline-ifelsepipeline-Condition": "条件函数",
+  "pipeline-msghub-readme": "MsgHub 用于在一组智能体之间共享信息",
+  "pipeline-msghub-AnnouncementName": "公告名称",
+  "pipeline-msghub-AnnouncementName-placeholder": "host",
+  "pipeline-msghub-AnnouncementContent": "公告内容",
+  "pipeline-msghub-AnnouncementContent-placeholder": "欢迎加入群聊!",
+  "pipeline-placeholder-readme": "不执行任何操作的占位符",
+  "pipeline-sequentialpipeline-readme": "实现顺序逻辑的模板流程（<b>从上到下</b>）",
+  "pipeline-switchpipeline-readme": "用于使用 switch-case 逻辑实现控制流的模板流程",
+  "pipeline-switchpipeline-Condition": "条件函数",
+  "pipeline-switchpipeline-AddCase": "添加案例",
+  "pipeline-switchpipeline-RemoveCase": "删除案例",
+  "pipeline-whilelooppipeline-readme": "用于实现 while 循环等控制流的模板流程",
+  "pipeline-whilelooppipeline-Condition": "条件函数",
+  "service-bing-search-readme": "在 ReActAgent 中集成必应搜索服务，以增强智能体功能",
+  "service-bing-search-Results": "结果编号",
+  "service-execute-python-readme": "在 ReActAgent中集成 Python 解释器，以增强智能体功能",
+  "service-google-search-readme": "将 Google 搜索服务集成到 ReActAgent 中以增强智能体功能",
+  "service-read-text-readme": "将阅读文本服务集成到 ReActAgent 中以增强智能体功能",
+  "service-write-text-readme": "将写入文本服务集成到 ReActAgent 中提升智能体能力",
+  "Welcome-Welcome": "👏 欢迎!",
+  "welcome-Easy-to-use": "易于使用的多智能体平台：",
+  "welcome-Shortkeys": "要点:",
+  "welcome-Easy-to-Use": "🤝 易于使用",
+  "welcome-High-Robustness": "✅ 高鲁棒性",
+  "welcome-Actor-Based": "🌐 基于Actor模型的分布式",
+  "welcome-Documentations": "文档:",
+  "welcome-Quick-Start": "🚀 快速入门",
+  "welcome-Examples": "💡 例子",
+  "welcome-Tutorial": " 📘 教程和 API 参考",
+  "en1-json-readme": "📖 这是如何在 AgentScope 中编写单轮对话的示例",
+  "en1-json-readme-h4": "模块用于:",
+  "en1-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
+  "en1-json-readme-sentence2": "- 代表应用程序中的用户。",
+  "en1-json-readme-sentence3": "- 应用程序中的对话智能体。",
+  "en2-json-readme": "📖 此示例演示了通过 AgentScope 与 Sequential Pipeline 进行的一轮用户 ReactAgent（使用 PythonService）对话",
+  "en2-json-readme-h4": "模块用于:",
+  "en2-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
+  "en2-json-readme-sentence2": "- 使信息按预定顺序在智能体之间传递。",
+  "en2-json-readme-sentence3": "- 代表应用程序中的用户。",
+  "en2-json-readme-sentence4": "- 实现 ReAct 算法的智能体类。",
+  "en2-json-readme-sentence5": "- 执行一段 python 代码。",
+  "en3-json-readme": "📖 这是如何在 AgentScope 中对用户智能体对话进行编程的示例。 ",
+  "en3-json-readme-h4": "模块用于:",
+  "en3-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
+  "en3-json-readme-sentence2": "- 设计用于执行重复性操作。",
+  "en3-json-readme-sentence3": "- 使信息按预定顺序在智能体之间传递。",
+  "en3-json-readme-sentence4": "- 代表应用程序中的用户。",
+  "en3-json-readme-sentence5": "- 应用程序中的对话智能体。",
+  "en3-json-readme-moreDetails": "更多详情，请参阅",
+  "en3-json-readme-moreDetailsHref": "此处",
+  "en4-json-readme": "📖 此例演示了 AgentScope 推动的多智能体群组聊天",
+  "en4-json-readme-h4": "模块用于:",
+  "en4-json-readme-sentence1": "- 每个应用程序都必须配置一个模型。",
+  "en4-json-readme-sentence2": "- MsgHub 是智能体像群聊一样分享信息的地方",
+  "en4-json-readme-sentence3": "- 信息在智能体之间流动传递。",
+  "en4-json-readme-sentence4": "- 设计用于执行重复性操作。",
+  "en4-json-readme-sentence5": "- 使信息按预定顺序在智能体之间传递。",
+  "en4-json-readme-sentence6": "- 代表应用程序中的用户。",
+  "en4-json-readme-sentence7": "- 应用程序中的对话智能体。",
+  "en4-json-readme-moreDetails": "更多详情，请参阅",
+  "en4-json-readme-moreDetailsHref": "此处",
+  "service-text-to-audio-reademe": "将文本转音频服务集成到 ReActAgent 中以增强智能体功能",
+  "service-text-to-audio-modelName": "模型名称",
+  "service-text-to-audio-sampleRate": "采样率",
+  "service-text-to-image-modelName": "模型名称",
+  "service-text-to-image-numberofImages": "图片数量",
+  "service-text-to-image-size": "图片尺寸",
+  "service-text-to-image-readme": "将文本转图像服务集成到 ReActAgent 中以增强智能体功能",
+  "tool-image-synthesis-readme": "文本生成图片",
+  "tool-image_synthesis-modelName": "模型名称",
+  "tool-image_synthesis-numberofImages": "图片数量",
+  "tool-image_synthesis-size": "图片尺寸",
+  "tool-image_synthesis-saveDir": "保存目录",
+  "tool-image-composition-readme": "将多张图片合成一张",
+  "tool-image-composition-Titles": "标题",
+  "tool-image-composition-Outputpath": "输出路径",
+  "tool-image-composition-row": "行",
+  "tool-image-composition-Column": "列",
+  "tool-image-composition-Spacing": "间距",
+  "tool-image-composition-titleHeight": "标题高度",
+  "tool-image-composition-fontName": "字体名称",
+  "tool-image-motion-readme": "通过视角移动将图片转化为mp4或者gif格式",
+  "tool-image-motion-outputPath": "输出路径",
+  "tool-image-motion-outputFormat": "输出格式",
+  "tool-image-motion-labelDuration": "持续时间",
+  "tool-image-motion-labelMotiondirection": "运动方向",
+  "tool-post-readme": "提交Post请求并返回结果",
+  "tool-post-label-outputPath": "输出路径",
+  "tool-post-label-outputtype": "输出类型",
+  "tool-video-composition-readme": "将多个视频合成一个",
+  "tool-video-composition-outputPath": "输出路径",
+  "tool-video-composition-targetVideoWidth": "目标视频宽度",
+  "tool-video-composition-targetVideoHeight": "目标视频高度",
+  "tool-video-composition-targetVideoFps": "目标视频帧率",
+  "tool-code-readme": "执行Python代码",
+  "tool-code-note": "注意:",
+  "tool-code-note-var": "- 输入和输出参数必须是Msg或者dict对象。",
+  "tool-code-note-func": "- 请勿修改函数名称。",
+  "tool-code-content": "代码",
+  "workstarionjs-import-prev": "上一步",
+  "workstarionjs-import-next": "下一步",
+  "workstarionjs-import-skip": "跳过",
+  "workstarionjs-import-quit": "退出",
+  "workstarionjs-import-caution": "注意：您当前处于教程模式，修改受到限制。",
+  "workstarionjs-import-Caution-click": "请单击",
+  "workstarionjs-import-Caution-quit": "退出",
+  "workstarionjs-import-Caution-exit": "退出并开始创建自定义多代理应用程序。"
 }
diff --git a/src/agentscope/studio/static/js/workstation.js b/src/agentscope/studio/static/js/workstation.js
index e9cf849c6..27a0efa76 100644
--- a/src/agentscope/studio/static/js/workstation.js
+++ b/src/agentscope/studio/static/js/workstation.js
@@ -2392,7 +2392,7 @@ async function addHtmlAndReplacePlaceHolderBeforeImport(data) {
       // Adjust the height of the box div
       let styleString = "";
       if (node.width) {
-        styleString += `width: ${node.width}; `;
+        const originalWidth = parseInt(node.width, 10);
         const adjustedWidth = originalWidth - 22;
         styleString += `width: ${adjustedWidth}px; `;
       }
diff --git a/src/agentscope/studio/templates/login.html b/src/agentscope/studio/templates/login.html
index 1df6d5ef3..dca28e383 100644
--- a/src/agentscope/studio/templates/login.html
+++ b/src/agentscope/studio/templates/login.html
@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{{ _("AgentScope WorkStation Login Page") }}</title>
+    <title i18n="login-page-title">AgentScope WorkStation Login Page</title>
     <link href="https://img.alicdn.com/imgextra/i3/O1CN01BP6UV221Lr7crkYBo_!!6000000006969-2-tps-380-372.png"
           rel="icon"
           type="image/png">
     <script src="{{ url_for('static', filename='js_third_party/jquery.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js_third_party/jquery.i18n.min.js') }}"></script>
     <script async defer
             src="{{ url_for('static', filename='js_third_party/buttons.js') }}"></script>
     <link rel="stylesheet"
@@ -26,7 +27,7 @@
             <option value="zh">中文</option>
         </select>
     </div>
-    <h1>{{ _("Welcome to AgentScope WorkStation") }}</h1>
+    <h1 i18n="login-page-welcome">Welcome to AgentScope WorkStation</h1>
 
     <a class="github-button" href="https://github.com/modelscope/agentscope"
        data-color-scheme="no-preference: light; light: light; dark: dark;"
@@ -50,45 +51,50 @@ <h1>{{ _("Welcome to AgentScope WorkStation") }}</h1>
     <img class="brand-gif"
          src="https://gw.alicdn.com/imgextra/i3/O1CN01uioF2Z1tYCsWgR3Cf_!!6000000005913-1-tps-2156-1080.gif"
          alt="AgentScope Animation">
-    <h4>{{ _("Please log in and star the AgentScope repository") }}.</h4>
+    <h4 i18n="login-page-terms-title">Please log in and star the AgentScope
+        repository</h4>
     <div class="terms">
-        {{ _("By logging in, you acknowledge that") }}:
+        <p i18n="login-page-terms-acknowledgment">By logging in, you
+            acknowledge that:</p>
         <ul>
-            <li>{{ _("This service will star🌟 AgentScope repository on your
-                behalf") }}.
+            <li i18n="login-page-terms-star">This service will star🌟
+                AgentScope repository on your behalf.
             </li>
-            <li>{{ _("Your API key will NOT be stored and exposed to the website
-                maintainer") }}.
+            <li i18n="login-page-terms-api">Your API key will NOT be stored and
+                exposed to the website maintainer.
             </li>
-            <li>{{ _("No user data (e.g., drawn workflow) within the service
-                will be saved") }}.
+            <li i18n="login-page-terms-data">No user data (e.g., drawn
+                workflow) within the service will be saved unless you
+                explicitly choose to save it.
             </li>
         </ul>
     </div>
     <div class="checkbox">
         <input type="checkbox" id="agreeTerms" onchange="toggleLoginButton()">
-        <label for="agreeTerms">{{ _("I agree to the terms of service") }}</label>
+        <label for="agreeTerms" i18n="login-page-terms-agree">I agree to the
+            terms of service</label>
     </div>
     <button onclick="redirectToGitHub()" disabled
-            id="loginButton">{{ _("Login with GitHub") }}
+            id="loginButton" i18n="login-page-login-github">Login with GitHub
     </button>
     <button onclick="loginAsGuest()" disabled
-            id="loginGuestButton">{{ _("Login as Guest") }}
+            id="loginGuestButton" i18n="login-page-login-guest">Login as Guest
     </button>
     <br><br>
 
     <div id="loaderContainer" class="waiting" style="display: none;">
         <div class="css-spinner"></div>
-        <b>{{ _("Please wait") }}...</b>
+        <b i18n="login-page-please-wait">Please wait...</b>
     </div>
 </div>
 
 <div id="surveyModal">
     <div id="surveyContent">
         <span id="surveyClose">&times;</span>
-        <h3>{{ _("We want to hear from you") }}</h3>
-        <button id="surveyButton">{{ _("Participation in questionnaire
-            surveys") }}
+        <h3 i18n="workstation-surveyContent">"We want to hear from
+            you"</h3>
+        <button id="surveyButton" i18n="workstation-surveyContent-Button">
+            Participation in questionnaire surveys
         </button>
     </div>
 </div>
@@ -173,13 +179,6 @@ <h3>{{ _("We want to hear from you") }}</h3>
                 }
             });
         });
-
-        function getCookie(name) {
-            var matches = document.cookie.match(new RegExp(
-                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
-            ));
-            return matches ? decodeURIComponent(matches[1]) : undefined;
-        }
     });
 
     function showSurveyModal() {
@@ -199,6 +198,30 @@ <h3>{{ _("We want to hear from you") }}</h3>
     });
 
     setTimeout(showSurveyModal, 500);
+
+    function getCookie(name) {
+        var matches = document.cookie.match(new RegExp(
+            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+        ));
+        return matches ? decodeURIComponent(matches[1]) : undefined;
+    }
+
+    function reloadi18n() {
+        const currentLang = getCookie("locale") || "en";
+        $("[i18n]").i18n({
+            defaultLang: currentLang,
+            filePath: "../static/i18n/",
+            filePrefix: "i18n_",
+            fileSuffix: "",
+            forever: true,
+            callback: function () {
+            }
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', (event) => {
+        reloadi18n();
+    });
 </script>
 </body>
 </html>
\ No newline at end of file