QuickBot 前端工程实战基于 Imagen3 文生图应用的 Angular 开发、构建与代码规范【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai本文以 QuickBot 系列模板中的 text-to-image-using-imagen3 为例系统讲解其 Angular 前端工程前端目录 frontend的开发、构建、测试与部署全流程。QuickBot 是一个可直接部署到 Cloud Run 的模板集合每个模板都是前后端分离架构前端为 Angular 应用后端为 FastAPI Python 应用。阅读本文后你将掌握该前端工程的本地开发服务器、代码脚手架、生产构建、单元测试与端到端测试等标准命令同时理解它与 Imagen3 文生图后端的对接方式后端目录以及 Docker 容器化部署的配置细节。QuickBot 模板架构概览QuickBot 是一组开箱即用的应用模板每个模板可以独立运行并接入用户默认的 Google Cloud 认证凭据根据模板复杂度不同部署时需要在 Google Cloud 项目中创建相应资源。整个架构始终遵循同样的结构frontend目录存放 Angular 前端应用backend目录存放 FastAPI Python 后端应用两者通过 HTTP 接口解耦通信。以 text-to-image-using-imagen3 为例应用借助 Vertex AI 上的 Imagen3 模型让用户通过文本提示词prompt生成高质量图片。整体项目结构如下可对照 根目录 READMEtext-to-image-using-imagen3/ ├── backend/ # Python 后端FastAPI/Uvicorn │ ├── main.py # 后端主应用入口 │ ├── requirements.txt # 后端依赖 │ └── README.md # 后端专项说明 ├── frontend/ # TypeScript 前端Angular │ ├── src/ # 前端源码 │ ├── package.json # 前端依赖与脚本 │ ├── angular.json # Angular 工程配置 │ ├── nginx.conf # 生产环境 Nginx 配置 │ ├── Dockerfile # 前端容器构建文件 │ └── README.md # 前端专项说明本文主题文档 ├── docker-compose.yml # 一键编排前后端服务 └── README.md # 项目根说明本前端工程由Angular CLI 15.1.3生成见 package.json 中angular/cli与angular/core均声明为^15.1.x。需要特别说明的是前端 README 中列出的命令ng serve、ng build、ng test等是 Angular CLI 的标准工作流而本文结合工程内真实的 package.json 脚本与 angular.json 配置将每一条命令映射到实际可运行的脚本使其真正可复制、可执行。本地开发服务器ng serve进入frontend/目录后执行cd frontend ng serveAngular CLI 会启动开发服务器并监听http://localhost:4200/修改任意源文件时应用会自动重新加载热更新。在 package.json 中start脚本就是ng serve因此直接运行npm start效果相同。开发模式下Angular 使用src/environments/environment.ts作为运行时配置environment.ts其中backendURL: http://localhost:8080/api指向本地 FastAPI 后端requiredLogin: False表示无需强制登录即可使用。代码脚手架ng generateAngular CLI 提供标准的代码生成能力ng generate component component-name也可以生成其他类型的代码单元ng generate directive|pipe|service|class|guard|interface|enum|module在该工程中src/app/components 下已包含header、footer、login、main内含chat-input、search-results与toast-message等组件src/app/services 下包含login、user等目录以及search.service.ts、speech-to-text.ts。这些目录结构可以作为你后续ng generate的命名与组织参考。提示工程在 angular.json 中通过schematics/angular:component将组件默认样式语言配置为scss因此生成的新组件会以.scss为样式文件扩展名。构建ng build 与多环境配置执行标准构建命令ng build构建产物会输出到dist/目录本工程实际输出路径为dist/quick-bot-app-frontend见 angular.json 的outputPath。工程在 package.json 中定义了多套构建脚本可直接使用build:prod: ng build --configuration production --aot --output-hashingall, build:dev: ng build --configuration development, build:staging: ng build --configuration staging, build: ng build, watch: ng build --watch --configuration developmentnpm run build:prod生产构建启用 AOT 预编译并对产物文件做全量内容哈希--output-hashingall便于浏览器长效缓存angular.json 中 production 配置还包含体积预算初始包警告上限 4MB、错误上限 10MB单组件样式警告 20KB、错误 50KB。npm run build:dev/npm run build:staging开发与预发布环境构建后者依赖staging配置可按需在angular.json中补充对应的environment.staging.ts文件。npm run watch监听源码变化并持续增量构建。生产构建的默认配置在 angular.json 中为defaultConfiguration: production同时工程引入了 Tailwind CSStailwind.config.js与 Angular Material 主题构建配置中angular/material/prebuilt-themes/indigo-pink.css。容器化构建与 Nginx 部署前端 Dockerfile 采用两阶段构建FROM node:18.17.1-alpine AS builder WORKDIR /app COPY . /app/ RUN npm ci RUN npm run build:prod FROM nginx:alpine COPY --frombuilder /app/dist/quick-bot-app-frontend /usr/share/nginx/html COPY --frombuilder /app/nginx.conf /etc/nginx/conf.d/ EXPOSE 8080第一阶段使用 Node 18 安装依赖npm ci基于package-lock.json保证可复现并执行npm run build:prod产出静态文件第二阶段基于nginx:alpine将构建产物复制到 Nginx 的 HTML 根目录并挂载 nginx.conf。该配置监听 8080 端口并通过try_files $uri $uri/ /index.html;实现 Angular 路由的 SPA 回退确保前端路由刷新不产生 404。单元测试ng testKarma Jasmine执行单元测试ng test测试运行器基于 Karma。本工程在 angular.json 中使用angular-devkit/build-angular:karmabuilder测试配置通过tsconfig.spec.json引入。工程为每个组件与服务都编写了对应的.spec.ts测试文件例如 search.service.spec.ts、auth.guard.spec.ts 以及各组件的*.component.spec.ts。在 package.json 中测试链路还串联了类型检查与代码规范检查pretest: npm run compile, posttest: npm run lint即运行npm test时Angular 会先执行 TypeScript 编译compile→tsc测试结束后自动执行lintgts lint。端到端测试ng e2e执行端到端测试ng e2e端到端测试通过你选择的平台运行。需要注意的是使用该命令前需要先添加一个实现了端到端测试能力的 npm 包例如 Cypress、Playwright 或 Protractor 等。本工程默认并未内置 e2e 测试框架依赖因此在执行前需要自行安装并配置对应的端到端测试包。进一步帮助如需了解更多 Angular CLI 用法可运行ng help查看完整的 CLI 命令参考也可以查阅 Angular CLI Overview and Command Reference 文档package.json 中angular/cli版本为 15.1.3注意命令行为以对应版本为准。前端与后端的对接方式前端通过依赖注入的SearchService与后端通信见 search.service.tsconst searchURL ${environment.backendURL}/search; Injectable({providedIn: root}) export class SearchService { constructor(private http: HttpClient) {} search(searchRequest: SearchRequest) { return this.http .post(searchURL, searchRequest) .pipe(map(response response as CombinedImageResults)); } }请求地址由environment.backendURL默认http://localhost:8080/api与/search拼接而成向 FastAPI 后端的/api/search接口发起POST请求请求体为 search.model.ts 中定义的SearchRequest即用户输入的文生图提示词响应被映射为 generated-image.model.ts 中的CombinedImageResults再由search-results组件渲染生成结果。在 docker-compose.yml 中前后端容器通过端口映射联通后端映射8080:8080前端映射4200:8080即访问宿主机 4200 端口进入 Nginx 服务的前端静态页面前端开发时使用的backendURL指向后端容器的 8080 端口。代码规范与提交规范为了维护代码质量与一致性QuickBot 系列遵循以下约定TypeScript前端遵循 Angular Coding Style Guide借助 Google 的gtsGoogle TypeScript Style Guide工具链包含格式化器、lint 器与自动修复器Python后端遵循 Google Python Style Guide使用pylint与black进行 lint 与格式化提交信息建议遵循 Angular 的 Commit Message Guidelines编写清晰、描述性的提交说明。前端TypeScript gts初始化gts若工程尚未配置在frontend/目录下执行npx gts init这会配置gts并生成必要的配置文件如tsconfig.json。确保tsconfig.json或相关的 gts 配置文件如.gtsrc继承gts默认配置{ extends: ./node_modules/gts/tsconfig-google.json }本工程已在 package.json 中声明gts: ^5.3.1作为 devDependency并定义了对应脚本lint: gts lint, fix: gts fix, clean: gts clean, compile: tsc, format: prettier --write \src/**/*.{ts,html,scss,json}\, check-format: prettier --check \src/**/*.{ts,html,scss,json}\检查 lint 问题npm run lint对应 package.json 中的lint: gts lint。自动修复可修复的 lint 问题npm run fix对应fix: gts fix。此外工程还额外集成了 Prettierformat/check-format脚本用于统一 TS/HTML/SCSS/JSON 的格式化风格。后端Python pylint black安装依赖将pylint与black加入backend/requirements.txtpylint black然后在虚拟环境中安装pip install pylint black # 或 pip install -r requirements.txt本工程的 backend/requirements.txt 已包含相关依赖且backend/目录下提供现成的 pylintrc 配置文件无需再从零生成。配置pylint建议在backend/目录放置.pylintrc以配置规则。若没有现成配置可通过pylint --generate-rcfile .pylintrc生成标准模板后再按项目需求参考 Google Python Style Guide定制。本工程直接使用目录内的pylintrc即可。使用pylint检查代码进入backend/目录执行pylint .或指定具体模块/包pylint your_module_name。使用black格式化代码自动格式化当前目录及子目录下所有 Python 文件python -m black . --line-length80--line-length80指定行宽上限为 80 字符与 Google Python Style Guide 的默认约定一致。结合源码的工程实践要点依赖锁文件前端根目录包含 package-lock.json配合 Dockerfile 中的npm ci可保证 CI/CD 与本地构建依赖完全一致避免版本漂移。后端local.env手动运行后端时需要在backend/目录准备本地环境变量文件。以 backend/local.env 为参考关键变量包括ENVIRONMENT如development、FRONTEND_URL如http://localhost:4200以及 Google Cloud / Vertex AI 相关配置项目 ID、区域、Imagen3 模型 ID 等。Linux bash 用户可将export追加到backend/.venv/bin/activate的 PATH 导出之后再通过env验证变量生效。Google Cloud 认证无论本地手动运行还是 Docker 部署都需要让应用尤其是后端能访问 Vertex AI 上的 Imagen3。推荐使用 Application Default CredentialsADCgcloud auth application-default login gcloud config set project your-project-id gcloud auth application-default set-quota-project your-project-id # 验证配置 gcloud auth list gcloud config list projectdocker-compose.yml 将宿主机~/.config/gcloud/Linux/macOS以只读方式挂载到后端容器:ro并将GOOGLE_APPLICATION_CREDENTIALS指向容器内的application_default_credentials.json实现本地 ADC 直接透传。Windows 用户需改为挂载%APPDATA%/gcloud对应路径。请确保目标项目已启用 Vertex AI API。完整启动流程在满足前置条件Docker 与 Docker Compose v2、Google Cloud SDK、Python 3.x、Node.js/npm后最快的一键启动方式是docker compose build docker compose up随后访问http://localhost:4200前端与http://localhost:8080后端 API。手动开发模式下后端用uvicorn main:app --reload --port 8080启动见 backend/main.py前端用npm start启动。以上内容以 frontend/README.md 为骨架结合工程内真实的 package.json、angular.json、Dockerfile、nginx.conf、docker-compose.yml 等源码与配置做了纵深补充。你可以基于这些命令和配置将 QuickBot 前端模板改造成自己的文生图应用界面并直接部署到 Cloud Run。【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
QuickBot 前端工程实战基于 Imagen3 文生图应用的 Angular 开发、构建与代码规范【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai本文以 QuickBot 系列模板中的 text-to-image-using-imagen3 为例系统讲解其 Angular 前端工程前端目录 frontend的开发、构建、测试与部署全流程。QuickBot 是一个可直接部署到 Cloud Run 的模板集合每个模板都是前后端分离架构前端为 Angular 应用后端为 FastAPI Python 应用。阅读本文后你将掌握该前端工程的本地开发服务器、代码脚手架、生产构建、单元测试与端到端测试等标准命令同时理解它与 Imagen3 文生图后端的对接方式后端目录以及 Docker 容器化部署的配置细节。QuickBot 模板架构概览QuickBot 是一组开箱即用的应用模板每个模板可以独立运行并接入用户默认的 Google Cloud 认证凭据根据模板复杂度不同部署时需要在 Google Cloud 项目中创建相应资源。整个架构始终遵循同样的结构frontend目录存放 Angular 前端应用backend目录存放 FastAPI Python 后端应用两者通过 HTTP 接口解耦通信。以 text-to-image-using-imagen3 为例应用借助 Vertex AI 上的 Imagen3 模型让用户通过文本提示词prompt生成高质量图片。整体项目结构如下可对照 根目录 READMEtext-to-image-using-imagen3/ ├── backend/ # Python 后端FastAPI/Uvicorn │ ├── main.py # 后端主应用入口 │ ├── requirements.txt # 后端依赖 │ └── README.md # 后端专项说明 ├── frontend/ # TypeScript 前端Angular │ ├── src/ # 前端源码 │ ├── package.json # 前端依赖与脚本 │ ├── angular.json # Angular 工程配置 │ ├── nginx.conf # 生产环境 Nginx 配置 │ ├── Dockerfile # 前端容器构建文件 │ └── README.md # 前端专项说明本文主题文档 ├── docker-compose.yml # 一键编排前后端服务 └── README.md # 项目根说明本前端工程由Angular CLI 15.1.3生成见 package.json 中angular/cli与angular/core均声明为^15.1.x。需要特别说明的是前端 README 中列出的命令ng serve、ng build、ng test等是 Angular CLI 的标准工作流而本文结合工程内真实的 package.json 脚本与 angular.json 配置将每一条命令映射到实际可运行的脚本使其真正可复制、可执行。本地开发服务器ng serve进入frontend/目录后执行cd frontend ng serveAngular CLI 会启动开发服务器并监听http://localhost:4200/修改任意源文件时应用会自动重新加载热更新。在 package.json 中start脚本就是ng serve因此直接运行npm start效果相同。开发模式下Angular 使用src/environments/environment.ts作为运行时配置environment.ts其中backendURL: http://localhost:8080/api指向本地 FastAPI 后端requiredLogin: False表示无需强制登录即可使用。代码脚手架ng generateAngular CLI 提供标准的代码生成能力ng generate component component-name也可以生成其他类型的代码单元ng generate directive|pipe|service|class|guard|interface|enum|module在该工程中src/app/components 下已包含header、footer、login、main内含chat-input、search-results与toast-message等组件src/app/services 下包含login、user等目录以及search.service.ts、speech-to-text.ts。这些目录结构可以作为你后续ng generate的命名与组织参考。提示工程在 angular.json 中通过schematics/angular:component将组件默认样式语言配置为scss因此生成的新组件会以.scss为样式文件扩展名。构建ng build 与多环境配置执行标准构建命令ng build构建产物会输出到dist/目录本工程实际输出路径为dist/quick-bot-app-frontend见 angular.json 的outputPath。工程在 package.json 中定义了多套构建脚本可直接使用build:prod: ng build --configuration production --aot --output-hashingall, build:dev: ng build --configuration development, build:staging: ng build --configuration staging, build: ng build, watch: ng build --watch --configuration developmentnpm run build:prod生产构建启用 AOT 预编译并对产物文件做全量内容哈希--output-hashingall便于浏览器长效缓存angular.json 中 production 配置还包含体积预算初始包警告上限 4MB、错误上限 10MB单组件样式警告 20KB、错误 50KB。npm run build:dev/npm run build:staging开发与预发布环境构建后者依赖staging配置可按需在angular.json中补充对应的environment.staging.ts文件。npm run watch监听源码变化并持续增量构建。生产构建的默认配置在 angular.json 中为defaultConfiguration: production同时工程引入了 Tailwind CSStailwind.config.js与 Angular Material 主题构建配置中angular/material/prebuilt-themes/indigo-pink.css。容器化构建与 Nginx 部署前端 Dockerfile 采用两阶段构建FROM node:18.17.1-alpine AS builder WORKDIR /app COPY . /app/ RUN npm ci RUN npm run build:prod FROM nginx:alpine COPY --frombuilder /app/dist/quick-bot-app-frontend /usr/share/nginx/html COPY --frombuilder /app/nginx.conf /etc/nginx/conf.d/ EXPOSE 8080第一阶段使用 Node 18 安装依赖npm ci基于package-lock.json保证可复现并执行npm run build:prod产出静态文件第二阶段基于nginx:alpine将构建产物复制到 Nginx 的 HTML 根目录并挂载 nginx.conf。该配置监听 8080 端口并通过try_files $uri $uri/ /index.html;实现 Angular 路由的 SPA 回退确保前端路由刷新不产生 404。单元测试ng testKarma Jasmine执行单元测试ng test测试运行器基于 Karma。本工程在 angular.json 中使用angular-devkit/build-angular:karmabuilder测试配置通过tsconfig.spec.json引入。工程为每个组件与服务都编写了对应的.spec.ts测试文件例如 search.service.spec.ts、auth.guard.spec.ts 以及各组件的*.component.spec.ts。在 package.json 中测试链路还串联了类型检查与代码规范检查pretest: npm run compile, posttest: npm run lint即运行npm test时Angular 会先执行 TypeScript 编译compile→tsc测试结束后自动执行lintgts lint。端到端测试ng e2e执行端到端测试ng e2e端到端测试通过你选择的平台运行。需要注意的是使用该命令前需要先添加一个实现了端到端测试能力的 npm 包例如 Cypress、Playwright 或 Protractor 等。本工程默认并未内置 e2e 测试框架依赖因此在执行前需要自行安装并配置对应的端到端测试包。进一步帮助如需了解更多 Angular CLI 用法可运行ng help查看完整的 CLI 命令参考也可以查阅 Angular CLI Overview and Command Reference 文档package.json 中angular/cli版本为 15.1.3注意命令行为以对应版本为准。前端与后端的对接方式前端通过依赖注入的SearchService与后端通信见 search.service.tsconst searchURL ${environment.backendURL}/search; Injectable({providedIn: root}) export class SearchService { constructor(private http: HttpClient) {} search(searchRequest: SearchRequest) { return this.http .post(searchURL, searchRequest) .pipe(map(response response as CombinedImageResults)); } }请求地址由environment.backendURL默认http://localhost:8080/api与/search拼接而成向 FastAPI 后端的/api/search接口发起POST请求请求体为 search.model.ts 中定义的SearchRequest即用户输入的文生图提示词响应被映射为 generated-image.model.ts 中的CombinedImageResults再由search-results组件渲染生成结果。在 docker-compose.yml 中前后端容器通过端口映射联通后端映射8080:8080前端映射4200:8080即访问宿主机 4200 端口进入 Nginx 服务的前端静态页面前端开发时使用的backendURL指向后端容器的 8080 端口。代码规范与提交规范为了维护代码质量与一致性QuickBot 系列遵循以下约定TypeScript前端遵循 Angular Coding Style Guide借助 Google 的gtsGoogle TypeScript Style Guide工具链包含格式化器、lint 器与自动修复器Python后端遵循 Google Python Style Guide使用pylint与black进行 lint 与格式化提交信息建议遵循 Angular 的 Commit Message Guidelines编写清晰、描述性的提交说明。前端TypeScript gts初始化gts若工程尚未配置在frontend/目录下执行npx gts init这会配置gts并生成必要的配置文件如tsconfig.json。确保tsconfig.json或相关的 gts 配置文件如.gtsrc继承gts默认配置{ extends: ./node_modules/gts/tsconfig-google.json }本工程已在 package.json 中声明gts: ^5.3.1作为 devDependency并定义了对应脚本lint: gts lint, fix: gts fix, clean: gts clean, compile: tsc, format: prettier --write \src/**/*.{ts,html,scss,json}\, check-format: prettier --check \src/**/*.{ts,html,scss,json}\检查 lint 问题npm run lint对应 package.json 中的lint: gts lint。自动修复可修复的 lint 问题npm run fix对应fix: gts fix。此外工程还额外集成了 Prettierformat/check-format脚本用于统一 TS/HTML/SCSS/JSON 的格式化风格。后端Python pylint black安装依赖将pylint与black加入backend/requirements.txtpylint black然后在虚拟环境中安装pip install pylint black # 或 pip install -r requirements.txt本工程的 backend/requirements.txt 已包含相关依赖且backend/目录下提供现成的 pylintrc 配置文件无需再从零生成。配置pylint建议在backend/目录放置.pylintrc以配置规则。若没有现成配置可通过pylint --generate-rcfile .pylintrc生成标准模板后再按项目需求参考 Google Python Style Guide定制。本工程直接使用目录内的pylintrc即可。使用pylint检查代码进入backend/目录执行pylint .或指定具体模块/包pylint your_module_name。使用black格式化代码自动格式化当前目录及子目录下所有 Python 文件python -m black . --line-length80--line-length80指定行宽上限为 80 字符与 Google Python Style Guide 的默认约定一致。结合源码的工程实践要点依赖锁文件前端根目录包含 package-lock.json配合 Dockerfile 中的npm ci可保证 CI/CD 与本地构建依赖完全一致避免版本漂移。后端local.env手动运行后端时需要在backend/目录准备本地环境变量文件。以 backend/local.env 为参考关键变量包括ENVIRONMENT如development、FRONTEND_URL如http://localhost:4200以及 Google Cloud / Vertex AI 相关配置项目 ID、区域、Imagen3 模型 ID 等。Linux bash 用户可将export追加到backend/.venv/bin/activate的 PATH 导出之后再通过env验证变量生效。Google Cloud 认证无论本地手动运行还是 Docker 部署都需要让应用尤其是后端能访问 Vertex AI 上的 Imagen3。推荐使用 Application Default CredentialsADCgcloud auth application-default login gcloud config set project your-project-id gcloud auth application-default set-quota-project your-project-id # 验证配置 gcloud auth list gcloud config list projectdocker-compose.yml 将宿主机~/.config/gcloud/Linux/macOS以只读方式挂载到后端容器:ro并将GOOGLE_APPLICATION_CREDENTIALS指向容器内的application_default_credentials.json实现本地 ADC 直接透传。Windows 用户需改为挂载%APPDATA%/gcloud对应路径。请确保目标项目已启用 Vertex AI API。完整启动流程在满足前置条件Docker 与 Docker Compose v2、Google Cloud SDK、Python 3.x、Node.js/npm后最快的一键启动方式是docker compose build docker compose up随后访问http://localhost:4200前端与http://localhost:8080后端 API。手动开发模式下后端用uvicorn main:app --reload --port 8080启动见 backend/main.py前端用npm start启动。以上内容以 frontend/README.md 为骨架结合工程内真实的 package.json、angular.json、Dockerfile、nginx.conf、docker-compose.yml 等源码与配置做了纵深补充。你可以基于这些命令和配置将 QuickBot 前端模板改造成自己的文生图应用界面并直接部署到 Cloud Run。【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
