概要

Giteeの「z-image-turbo」モデルを使ってテキストから画像を生成するWebアプリケーションの実装例です。フロントエンドはReact（v19）でダークモードのGradio風UIを提供し、複数のアスペクト比や生成設定を切り替えられます。バックエンドにはHonoを利用した軽量APIレイヤが想定され、Cloudflare Pagesなどの静的/サーバレス環境へのデプロイに対応する構成になっています。TypeScriptで書かれ、ローカル実行からクラウドデプロイまで試せるサンプルプロジェクトです。（約300字）

リポジトリの統計情報

スター数: 19
フォーク数: 20
ウォッチャー数: 19
コミット数: 24
ファイル数: 9
メインの言語: TypeScript

主な特徴

ダークモードのGradio風UIで操作性に優れたフロントエンド
複数アスペクト比プリセット（1:1、16:9、9:16、4:3、3:4など）
Gitee AI API（z-image-turbo）を利用したテキスト→画像生成
Cloudflare Pages等を想定した軽量でデプロイしやすい構成

技術的なポイント

本プロジェクトはTypeScriptでフロント／バックエンドを統一し、React（v19）をフロントエンドUIに採用、Honoを用いた軽量API層でGiteeのz-image-turboエンドポイントへリクエストを仲介する設計が特徴です。フロントエンドはグリッドやキャンバス表示を持たないシンプルな操作系を採用し、複数のアスペクト比やプロンプト、シードやステップ数など生成パラメータをUIから制御できます。デプロイ面ではCloudflare Pagesなどの静的ホスティング＋サーバレス関数に適した構造にしてあり、認証トークン管理やCORS対策、APIレート制限の考慮が必要な実運用に向けた土台を提供しています。READMEに中国語版ドキュメントがあることからローカライズ対応も意識されており、サンプルコードは最小限に抑えられているため、独自モデルや別APIへの差し替えも容易です。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
.mcp.json: file
README.md: file
README.zh.md: file
apps: dir

その他主なファイル（例示）：

package.json / tsconfig.json（TypeScriptとパッケージ設定）
src/（フロントエンドとAPIのソース）
public/（静的アセット） …他 4 ファイル

appsディレクトリ以下にフロントエンドのReactアプリやサーバレス用のエンドポイントが格納されている想定です。READMEからはUIの特色（ダークモード、複数比率プリセット）や利用技術（React, Hono）とデプロイ先の候補（Cloudflare Pages）が明記されており、小規模ながら実践的な画像生成ワークフローを構築するための参照例として使えます。

使いどころと注意点

プロトタイプや学習目的：Giteeのz-imageモデルをブラウザから試すには最適。UIが整っているためユーザテストもしやすい。
カスタマイズ：モデルパラメータやプロンプトプリセット、出力サイズの調整を行えば、生成品質や速度のバランスを現場要件に合わせやすい。
運用上の留意点：APIキーの管理（クライアントに直置きしない）、モデル呼び出しのレート制御、生成画像の保存・配布ポリシー、Cloudflare等でのエッジキャッシュと課金に注意が必要です。