feat: support web search and create app

Author: zhu-xiaowei

.github/workflows/release.yml

@@ -11,7 +11,7 @@ on:
         required: true
         type: string
 permissions:
-  contents: read
+  contents: write
   pull-requests: write
 env:
   NEW_VERSION: ${{ github.event.inputs.release_tag }}

README.md

@@ -16,17 +16,41 @@ across Android, iOS, and macOS platforms.
 ![](assets/promo.avif)
 
 ### What's New 🔥
+- 🚀 Support Create App to create, edit and share instant web apps (From v2.7.0).
+- 🚀 Support Web Search for real-time information retrieval (From v2.7.0).
+- 🚀 Update SwiftChat Server with API Gateway + Lambda deployment supporting 15-minute streaming output (From v2.7.0).
+- 🚀 Support Image Gallery for browsing and managing generated images (From v2.7.0).
 - 🚀 Support streaming rendering of Mermaid charts (From v2.6.0).
-   <div style="display: flex; flex-direction: 'row'; background-color: #888888;">
-   <img src="assets/animations/mermaid_en.avif" width=48%>
-   <img src="assets/animations/mermaid_save_en.avif" width=48%>
-   </div>
 - 🚀 Support using Bedrock API Key for Amazon Bedrock models (From v2.5.0).
-- 🚀 Support virtual try-on, automatically recognize clothes, pants, shoes and try them on (From v2.5.0).
-- 🚀 Support shortcuts for macOS (From v2.5.0).
-    - Use `Shift + Enter`, `Control + Enter` or `Option + Enter` to add a line break.
-    - Use `⌘ + V` to add images (Screenshot), videos, or documents from your clipboard.
-    - Use `⌘ + N` to opening multiple Mac windows for parallel operations.
+
+**Create App**: Generate, Edit, Share and Preview Instant Web Apps
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/create_app.avif" width=24%>
+<img src="assets/animations/edit_and_save.avif" width=24%>
+<img src="assets/animations/gallery_edit_app.avif" width=24%>
+<img src="assets/animations/share_and_import.avif" width=24%>
+</div>
+
+**App Examples**: 2048 Game, Gomoku, News Reader and Tetris
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/app_2048.avif" width=24%>
+<img src="assets/animations/app_gomoku.avif" width=24%>
+<img src="assets/animations/app_news.avif" width=24%>
+<img src="assets/animations/app_tetris.avif" width=24%>
+</div>
+
+**Web Search & Mermaid**: Real-time Information Retrieval and Streaming Chart Rendering
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/websearch_tavily.avif" width=24%>
+<img src="assets/animations/websearch_google.avif" width=24%>
+<img src="assets/animations/mermaid_en.avif" width=24%>
+<img src="assets/animations/mermaid_save_en.avif" width=24%>
+</div>
+
+> Note: Tavily is recommended for best results. Google Search requires manual verification on first use. Baidu and Bing are currently in beta and may return inaccurate results.
 
 ## 📱 Quick Download
 
@@ -36,11 +60,6 @@ across Android, iOS, and macOS platforms.
 
 ## Getting Started with Amazon Bedrock
 
-### Prerequisites
-
-Click [Amazon Bedrock Model access](https://console.aws.amazon.com/bedrock/home#/modelaccess) to enable your models
-access.
-
 ### Configuration
 
 You can choose one of the following two methods for configuration
@@ -62,16 +81,13 @@ You can choose one of the following two methods for configuration
 <details>
 <summary><b>🔧 Configure SwiftChat Server (Click to expand)</b></summary>
 
-### Architecture
+> **Note**: From v2.7.0, we recommend redeploying the SwiftChat Server for better performance with API Gateway + Lambda supporting 15-minute streaming output. Your existing API Key can be reused - you only need to update the Server URL in the app.
 
-![](/assets/architecture.avif)
+### Architecture
 
-By default, we use **AWS App Runner**, which is commonly used to host Python FastAPI servers, offering high performance,
-scalability and low latency.
+![](/assets/architecture.png)
 
-Alternatively, we provide the option to replace App Runner with **AWS Lambda** using Function URL for a more
-cost-effective
-solution, as shown in
+We use **API Gateway** combined with **AWS Lambda** to enable streaming responses for up to 15 minutes, as shown in
 this [example](https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/fastapi-response-streaming).
 
 ### Step 1: Set up your API Key
@@ -107,34 +123,28 @@ this [example](https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examp
    - ECR repository name (or use default: `swift-chat-api`)
    - Image tag (please use default: `latest`)
    - AWS region (the region you want to deploy, e.g.,: `us-east-1`)
-   - Deployment type:
-     - Option 1 (default): **AppRunner** - uses amd64 architecture
-     - Option 2: **Lambda** - uses arm64 architecture
 
 4. The script will build and push the Docker image to your ECR repository.
 
 5. **Important**: Copy the image URI displayed at the end of the script output. You'll need this in the next step.
 
 ### Step 3: Deploy stack and get your API URL
 
-1. Download the CloudFormation template you want to use:
-   - For App Runner: [SwiftChatAppRunner.template](https://github.com/aws-samples/swift-chat/blob/main/server/template/SwiftChatAppRunner.template)
-   - For Lambda: [SwiftChatLambda.template](https://github.com/aws-samples/swift-chat/blob/main/server/template/SwiftChatLambda.template)
+1. Download the CloudFormation template:
+   - Lambda: [SwiftChatLambda.template](https://github.com/aws-samples/swift-chat/blob/main/server/template/SwiftChatLambda.template)
 
 2. Go to [CloudFormation Console](https://console.aws.amazon.com/cloudformation/home#/stacks/create/template?stackName=SwiftChatAPI) and select **Upload a template file** under **Specify template**, then upload the template file you downloaded. (Make sure you are in the same region where your API Key was created.)
 
 3. Click **Next**, On the "Specify stack details" page, provide the following information:
-    - **Stack name**: Keep the default "SwiftChatAPI" or change if needed
     - **ApiKeyParam**: Enter the parameter name you used for storing the API key (e.g., "SwiftChatAPIKey")
     - **ContainerImageUri**: Enter the ECR image URI from Step 2 output
-    - For App Runner, choose an **InstanceTypeParam** based on your needs
 
 4. Click **Next**, Keep the "Configure stack options" page as default, Read the Capabilities and Check the "I
    acknowledge that AWS CloudFormation might create IAM resources" checkbox at the bottom.
 5. Click **Next**, In the "Review and create" Review your configuration and click **Submit**.
 
 Wait about 3–5 minutes for the deployment to finish, then click the CloudFormation stack and go to **Outputs** tab, you
-can find the **API URL** which looks like: `https://xxx.xxx.awsapprunner.com` or `https://xxx.lambda-url.xxx.on.aws`
+can find the **API URL** which looks like: `https://xxx.execute-api.us-east-1.amazonaws.com/v1`
 
 ### Step 4: Open the App and setup with API URL and API Key
 
@@ -258,20 +268,20 @@ can enable the **Use Proxy** option to forward your requests.
 <img src="assets/animations/video_summary.avif" width=24%>
 </div>
 
-**Creative Image Suite**: Generation, Virtual try-on, Style Replication, Background Removal with Nova Canvas
+**Creative Image Suite**: Generation, Virtual try-on, Background Removal and Image Gallery with Nova Canvas
 
 <div style="display: flex; flex-direction: 'row'; background-color: #888888;">
 <img src="assets/animations/gen_image.avif" width=24%>
 <img src="assets/animations/virtual_try_on_demo.avif" width=24%>
-<img src="assets/animations/similar_style.avif" width=24%>
 <img src="assets/animations/remove_background.avif" width=24%>
+<img src="assets/animations/image_gallery.avif" width=24%>
 </div>
 
 **System Prompt Assistant**: Useful Preset System Prompts with Full Management Capabilities (Add/Edit/Sort/Delete)
 
 ![](assets/animations/english_teacher.avif)
 
-**Rich Markdown Support**: Paragraph, Code Blocks, Tables, LaTeX and More
+**Rich Markdown Support**: Paragraph, Code Blocks, Tables, LaTeX, Mermaid and More
 
 ![](assets/markdown.avif)
 
@@ -358,6 +368,7 @@ We feature streamlined chat History, Settings pages, and intuitive Usage statist
 - [x] Support image generation with Chinese prompts (Make sure `Amazon Nova Lite` is enabled in your selected region)
 - [x] Long press images to save or share
 - [x] Automatic image compression to improve response speed
+- [x] Image Gallery for browsing and managing all generated images
 
 ### User Experience
 
@@ -464,10 +475,14 @@ the [release notes](https://github.com/aws-samples/swift-chat/releases) to see i
 
 ### Upgrade API
 
-- **For AppRunner**: Click and open [App Runner Services](https://console.aws.amazon.com/apprunner/home#/services) page,
-  find and open `swiftchat-api`, click top right **Deploy** button.
-- **For Lambda**: Click and open [Lambda Services](https://console.aws.amazon.com/lambda/home#/functions), find and open
-  your Lambda which start with `SwiftChatLambda-xxx`, click the **Deploy new image** button and click Save.
+1. First, re-run the build script to update the image:
+   ```bash
+   cd server/scripts
+   bash ./push-to-ecr.sh
+   ```
+
+2. Click and open [Lambda Services](https://console.aws.amazon.com/lambda/home#/functions), find and open
+   your Lambda which starts with `SwiftChatAPILambda-xxx`, click the **Deploy new image** button and click Save.
 
 ## Security
 

README_CN.md

@@ -15,18 +15,41 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 ![](assets/promo.avif)
 
 ### 新功能 🔥
-
+- 🚀 支持创建应用，创建、编辑和分享极速 Web 应用（自 v2.7.0 起）。
+- 🚀 支持网络搜索，获取实时信息（自 v2.7.0 起）。
+- 🚀 更新 SwiftChat 服务器，支持 API Gateway + Lambda 部署，最长支持 15 分钟流式输出（自 v2.7.0 起）。
+- 🚀 支持图片画廊，浏览和管理生成的图片（自 v2.7.0 起）。
 - 🚀 支持流式渲染 Mermaid 图表（自 v2.6.0 起）。
-   <div style="display: flex; flex-direction: 'row'; background-color: #888888;">
-   <img src="assets/animations/mermaid.avif" width=48%>
-   <img src="assets/animations/mermaid_save.avif" width=48%>
-   </div>
 - 🚀 支持使用 Bedrock API Key 连接 Amazon Bedrock 模型（自 v2.5.0 起）。
-- 🚀 支持虚拟试衣功能，自动识别衣服、裤子、鞋子并试穿（自 v2.5.0 起）。
-- 🚀 支持 macOS 快捷键操作（自 v2.5.0 起）。
-    - 使用 `Shift + Enter`、`Control + Enter` 或 `Option + Enter` 添加换行。
-    - 使用 `⌘ + V` 从剪贴板添加图片（截图）、视频或文档。
-    - 使用 `⌘ + N` 打开多个 Mac 窗口进行并行操作。
+
+**创建应用**：生成、编辑、分享和预览极速 Web 应用
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/create_app.avif" width=24%>
+<img src="assets/animations/edit_and_save.avif" width=24%>
+<img src="assets/animations/gallery_edit_app.avif" width=24%>
+<img src="assets/animations/share_and_import.avif" width=24%>
+</div>
+
+**应用示例**：2048 游戏、五子棋、新闻阅读器和俄罗斯方块
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/app_2048.avif" width=24%>
+<img src="assets/animations/app_gomoku.avif" width=24%>
+<img src="assets/animations/app_news.avif" width=24%>
+<img src="assets/animations/app_tetris.avif" width=24%>
+</div>
+
+**网络搜索 & Mermaid**：实时信息检索和流式图表渲染
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/websearch_tavily.avif" width=24%>
+<img src="assets/animations/websearch_google.avif" width=24%>
+<img src="assets/animations/mermaid.avif" width=24%>
+<img src="assets/animations/mermaid_save.avif" width=24%>
+</div>
+
+> 注意：推荐使用 Tavily 以获得最佳效果。Google 搜索首次使用需要手动验证。百度和必应目前处于测试版本，搜索结果可能不准确。
 
 ## 📱 快速下载
 
@@ -36,10 +59,6 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 
 ## Amazon Bedrock 入门指南
 
-### 前置条件
-
-点击 [Amazon Bedrock 模型访问](https://console.aws.amazon.com/bedrock/home#/modelaccess) 启用您的模型访问权限。
-
 ### 配置
 
 您可以选择以下两种配置方法中的一种
@@ -58,14 +77,13 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 <details>
 <summary><b>🔧 配置 SwiftChat 服务器（点击展开）</b></summary>
 
-### 架构
+> **注意**：自 v2.7.0 起，我们建议重新部署 SwiftChat 服务器以获得更好的性能，支持 API Gateway + Lambda 实现最长 15 分钟的流式输出。您之前创建的 API Key 可以复用 - 只需在应用中更新服务器 URL 即可。
 
-![](/assets/architecture.avif)
+### 架构
 
-默认情况下，我们使用 **AWS App Runner**，它通常用于托管 Python FastAPI 服务器，提供高性能、可扩展性和低延迟。
+![](/assets/architecture.png)
 
-或者，我们提供用 **AWS Lambda** 使用 Function URL 替代 App Runner
-的选项，以获得更具成本效益的解决方案，如此 [示例](https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/fastapi-response-streaming)
+我们提供用 **API Gateway** 与 **AWS Lambda** 结合的方式，实现最长15分钟的流式传输，如此 [示例](https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/fastapi-response-streaming)
 所示。
 
 ### 步骤 1：设置您的 API 密钥
@@ -100,32 +118,26 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
    - ECR 仓库名称（或使用默认值：`swift-chat-api`）
    - 镜像标签（请使用默认值：`latest`）
    - AWS 区域（填写你希望部署的区域，例如：`us-east-1`）
-   - 部署类型：
-     - 选项 1（默认）：**AppRunner** - 使用 amd64 架构
-     - 选项 2：**Lambda** - 使用 arm64 架构
 
 4. 脚本将构建并推送 Docker 镜像到您的 ECR 仓库。
 
 5. **重要**：复制脚本输出末尾显示的镜像 URI。您将在下一步中需要它。
 
 ### 步骤 3：部署堆栈并获取 API URL
 
-1. 下载您想使用的 CloudFormation 模板：
-   - App Runner：[SwiftChatAppRunner.template](https://github.com/aws-samples/swift-chat/blob/main/server/template/SwiftChatAppRunner.template)
+1. 下载 CloudFormation 模板：
    - Lambda：[SwiftChatLambda.template](https://github.com/aws-samples/swift-chat/blob/main/server/template/SwiftChatLambda.template)
 
 2. 前往 [CloudFormation 控制台](https://console.aws.amazon.com/cloudformation/home#/stacks/create/template?stackName=SwiftChatAPI)，在**指定模板**下选择**上传模板文件**，然后上传您下载的模板文件。（确保您所在的区域与创建 API Key 的区域相同。）
 
 3. 点击 **下一步**，在"指定堆栈详细信息"页面，提供以下信息：
-    - **Stack name**：保持默认的 "SwiftChatAPI" 或根据需要更改
     - **ApiKeyParam**：输入您用于存储 API 密钥的参数名称（例如 "SwiftChatAPIKey"）
     - **ContainerImageUri**：输入步骤 2 输出的 ECR 镜像 URI
-    - 对于 App Runner，根据您的需求选择 **InstanceTypeParam**
 
 4. 点击 **下一步**，保持"配置堆栈选项"页面为默认，阅读功能并勾选底部的"我确认 AWS CloudFormation 可能会创建 IAM 资源"复选框。
 5. 点击 **下一步**，在"审核并创建"中检查您的配置并点击 **提交**。
 
-等待约 3-5 分钟完成部署，然后点击 CloudFormation 堆栈并转到 **输出** 选项卡，您可以找到 **API URL**，类似于：`https://xxx.xxx.awsapprunner.com` 或 `https://xxx.lambda-url.xxx.on.aws`
+等待约 3-5 分钟完成部署，然后点击 CloudFormation 堆栈并转到 **输出** 选项卡，您可以找到 **API URL**，类似于：`https://xxx.execute-api.us-east-1.amazonaws.com/v1`
 
 ### 步骤 4：打开应用并使用 API URL 和 API Key 进行设置
 
@@ -245,20 +257,20 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 <img src="assets/animations/video_summary.avif" width=24%>
 </div>
 
-**创意图像套件**：生成、虚拟试衣、风格复制、背景移除，由 Nova Canvas 提供支持
+**创意图像套件**：生成、虚拟试衣、背景移除和图片画廊，由 Nova Canvas 提供支持
 
 <div style="display: flex; flex-direction: 'row'; background-color: #888888;">
 <img src="assets/animations/gen_image.avif" width=24%>
-<img src="assets/animations/virtual_try_on.avif" width=24%>
-<img src="assets/animations/similar_style.avif" width=24%>
+<img src="assets/animations/virtual_try_on_demo.avif" width=24%>
 <img src="assets/animations/remove_background.avif" width=24%>
+<img src="assets/animations/image_gallery.avif" width=24%>
 </div>
 
 **系统提示词助手**：有用的预设系统提示词，具备完整管理功能（添加/编辑/排序/删除）
 
 ![](assets/animations/english_teacher.avif)
 
-**丰富的 Markdown 支持**：段落、代码块、表格、LaTeX 等
+**丰富的 Markdown 支持**：段落、代码块、表格、LaTeX、Mermaid 等
 
 ![](assets/markdown.avif)
 
@@ -341,6 +353,7 @@ https://github.com/user-attachments/assets/c70fc2b4-8960-4a5e-b4f8-420fcd5eafd4
 - [x] 支持使用中文提示生成图像（确保在您选择的区域启用了 `Amazon Nova Lite`）
 - [x] 长按图像保存或分享
 - [x] 自动图像压缩以提高响应速度
+- [x] 图片画廊，浏览和管理所有生成的图片
 
 ### 用户体验
 
@@ -441,10 +454,14 @@ npm run ios
 
 ### 升级 API
 
-- **对于 AppRunner**：点击打开 [App Runner 服务](https://console.aws.amazon.com/apprunner/home#/services) 页面，找到并打开
-  `swiftchat-api`，点击右上角 **部署** 按钮。
-- **对于 Lambda**：点击打开 [Lambda 服务](https://console.aws.amazon.com/lambda/home#/functions) 页面，找到并打开以
-  `SwiftChatLambda-xxx` 开头的 Lambda，点击 **部署新镜像** 按钮并点击保存。
+1. 首先重新运行构建脚本以更新镜像：
+   ```bash
+   cd server/scripts
+   bash ./push-to-ecr.sh
+   ```
+
+2. 点击打开 [Lambda 服务](https://console.aws.amazon.com/lambda/home#/functions) 页面，找到并打开以
+   `SwiftChatAPILambda-xxx` 开头的 Lambda，点击 **部署新镜像** 按钮并点击保存。
 
 ## 安全