feat: Google Gemini image generation for project covers

Schema: - SystemSettings: geminiApiKey, geminiModel, imageProvider fields - imageProvider: "dalle" (default) or "gemini" Gemini Client (packages/api/src/gemini-client.ts): - Direct HTTP call to Gemini REST API with responseModalities: [TEXT, IMAGE] - Returns base64 data URL - Error parsing with user-friendly messages Router (project.ts): - generateCover: routes to DALL-E or Gemini based on imageProvider setting - New isImageGenConfigured query returning { configured, provider } Admin UI (SystemSettingsClient.tsx): - "Image Generation" section with provider radio buttons (DALL-E / Gemini) - Conditional fields: DALL-E config or Gemini API key + model - Separate save button for image settings Security: - geminiApiKey sanitized in audit logs (SENSITIVE_FIELDS) - API key stored server-side only, never sent to client Co-Authored-By: claude-flow <ruv@ruv.net>
2026-03-23 15:02:35 +01:00
parent 52d425043b
commit 502ecba9e9
6 changed files with 339 additions and 64 deletions
@@ -96,6 +96,13 @@ export function SystemSettingsClient() {
  const [dalleEndpoint, setDalleEndpoint] = useState("");
  const [dalleApiKey, setDalleApiKey] = useState("");

+  // Gemini / Image generation settings
+  type ImageProvider = "dalle" | "gemini";
+  const [imageProvider, setImageProvider] = useState<ImageProvider>("dalle");
+  const [geminiApiKey, setGeminiApiKey] = useState("");
+  const [geminiModel, setGeminiModel] = useState("");
+  const [imageSaved, setImageSaved] = useState(false);
+
  // SMTP settings
  const [smtpHost, setSmtpHost] = useState("");
  const [smtpPort, setSmtpPort] = useState(587);
@@ -144,6 +151,9 @@ export function SystemSettingsClient() {
      // DALL-E
      setDalleDeployment(settings.azureDalleDeployment ?? "");
      setDalleEndpoint(settings.azureDalleEndpoint ?? "");
+      // Image provider / Gemini
+      setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
+      setGeminiModel(settings.geminiModel ?? "");
      // SMTP
      setSmtpHost(settings.smtpHost ?? "");
      setSmtpPort(settings.smtpPort ?? 587);
@@ -240,6 +250,13 @@ export function SystemSettingsClient() {
    },
  });

+  const saveImageMutation = trpc.settings.updateSystemSettings.useMutation({
+    onSuccess: () => {
+      setImageSaved(true);
+      setTimeout(() => setImageSaved(false), 3000);
+    },
+  });
+
  function handleSaveSmtp() {
    saveSmtpMutation.mutate({
      smtpHost: smtpHost || undefined,
@@ -259,6 +276,19 @@ export function SystemSettingsClient() {
    saveTimelineMutation.mutate({ timelineUndoMaxSteps: undoMaxSteps });
  }

+  function handleSaveImage() {
+    saveImageMutation.mutate({
+      imageProvider,
+      // DALL-E fields
+      azureDalleDeployment: dalleDeployment || undefined,
+      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
+      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
+      // Gemini fields
+      ...(geminiApiKey ? { geminiApiKey } : {}),
+      geminiModel: geminiModel || undefined,
+    });
+  }
+
  function handleSaveAnonymization() {
    saveAnonymizationMutation.mutate({
      anonymizationEnabled,
@@ -295,9 +325,6 @@ export function SystemSettingsClient() {
      aiTemperature: temperature,
      aiSummaryPrompt: summaryPrompt || undefined,
      ...(apiKey ? { azureOpenAiApiKey: apiKey } : {}),
-      azureDalleDeployment: dalleDeployment,
-      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
-      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
    });
  }

@@ -1018,67 +1045,159 @@ export function SystemSettingsClient() {
        </div>
      </div>

-      {/* ── DALL-E Image Generation ────────────────────────────────── */}
+      {/* ── Image Generation ────────────────────────────────── */}
      <div className={PANEL_CLASS}>
        <div>
          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            DALL-E Image Generation <InfoTooltip content="Configure the DALL-E model used for generating project cover art. Uses the same provider (OpenAI / Azure) as the chat model above." />
+            Image Generation <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Used to generate AI cover art for projects. Leave blank to disable AI cover generation.
+            Used to generate AI cover art for projects. Configure at least one provider below.
          </p>
        </div>

-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <label className={LABEL_CLASS}>
-              <span className="flex items-center">
-                Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
-              </span>
+        {/* Provider selector */}
+        <div>
+          <label className={LABEL_CLASS}>Provider</label>
+          <div className="flex gap-4">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="imageProvider"
+                value="dalle"
+                checked={imageProvider === "dalle"}
+                onChange={() => setImageProvider("dalle")}
+                className="accent-brand-600"
+              />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">DALL-E (Azure OpenAI / OpenAI)</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="imageProvider"
+                value="gemini"
+                checked={imageProvider === "gemini"}
+                onChange={() => setImageProvider("gemini")}
+                className="accent-brand-600"
+              />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google Gemini</span>
            </label>
-            <input
-              type="text"
-              className={INPUT_CLASS}
-              value={dalleDeployment}
-              onChange={(e) => setDalleDeployment(e.target.value)}
-              placeholder="dall-e-3"
-            />
          </div>
+        </div>

-          {provider === "azure" && (
-            <>
+        {/* DALL-E settings (shown when DALL-E selected) */}
+        {imageProvider === "dalle" && (
+          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">DALL-E Configuration</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
-                    Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
+                    Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
                  </span>
                </label>
                <input
                  type="text"
                  className={INPUT_CLASS}
-                  value={dalleEndpoint}
-                  onChange={(e) => setDalleEndpoint(e.target.value)}
-                  placeholder="Leave empty to use same endpoint as chat"
+                  value={dalleDeployment}
+                  onChange={(e) => setDalleDeployment(e.target.value)}
+                  placeholder="dall-e-3"
                />
              </div>

+              {provider === "azure" && (
+                <>
+                  <div>
+                    <label className={LABEL_CLASS}>
+                      <span className="flex items-center">
+                        Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
+                      </span>
+                    </label>
+                    <input
+                      type="text"
+                      className={INPUT_CLASS}
+                      value={dalleEndpoint}
+                      onChange={(e) => setDalleEndpoint(e.target.value)}
+                      placeholder="Leave empty to use same endpoint as chat"
+                    />
+                  </div>
+
+                  <div>
+                    <label className={LABEL_CLASS}>
+                      <span className="flex items-center">
+                        API Key{" "}
+                        <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
+                        <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
+                      </span>
+                    </label>
+                    <input
+                      type="password"
+                      className={INPUT_CLASS}
+                      value={dalleApiKey}
+                      onChange={(e) => setDalleApiKey(e.target.value)}
+                      placeholder="Leave empty to use same API key as chat"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+            {settings?.hasDalleApiKey && (
+              <p className="text-xs text-green-600 dark:text-green-400">A separate DALL-E API key is stored.</p>
+            )}
+          </div>
+        )}
+
+        {/* Gemini settings (shown when Gemini selected) */}
+        {imageProvider === "gemini" && (
+          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Google Gemini Configuration</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
-                    API Key{" "}
-                    <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
-                    <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
+                    API Key <InfoTooltip content="Google Gemini API key from Google AI Studio (aistudio.google.com)." />
                  </span>
                </label>
                <input
                  type="password"
                  className={INPUT_CLASS}
-                  value={dalleApiKey}
-                  onChange={(e) => setDalleApiKey(e.target.value)}
-                  placeholder="Leave empty to use same API key as chat"
+                  value={geminiApiKey}
+                  onChange={(e) => setGeminiApiKey(e.target.value)}
+                  placeholder={settings?.hasGeminiApiKey ? "••••••••  (key is stored)" : "Enter Gemini API key"}
+                />
+                {settings?.hasGeminiApiKey && !geminiApiKey && (
+                  <p className="text-xs text-green-600 dark:text-green-400 mt-1">API key is stored.</p>
+                )}
+              </div>
+              <div>
+                <label className={LABEL_CLASS}>
+                  <span className="flex items-center">
+                    Model <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
+                  </span>
+                </label>
+                <input
+                  type="text"
+                  className={INPUT_CLASS}
+                  value={geminiModel}
+                  onChange={(e) => setGeminiModel(e.target.value)}
+                  placeholder="gemini-2.0-flash-preview-image-generation"
                />
              </div>
-            </>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center gap-3 pt-1">
+          <button
+            type="button"
+            className={PRIMARY_BUTTON_CLASS}
+            disabled={saveImageMutation.isPending}
+            onClick={handleSaveImage}
+          >
+            {saveImageMutation.isPending ? "Saving..." : "Save Image Settings"}
+          </button>
+          {imageSaved && (
+            <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
          )}
        </div>
      </div>
@@ -25,7 +25,7 @@ export function CoverArtSection({ projectId, coverImageUrl, coverFocusY = 50, pr
  const fileInputRef = useRef<HTMLInputElement>(null);
  const utils = trpc.useUtils();

-  const { data: dalleStatus } = trpc.project.isDalleConfigured.useQuery();
+  const { data: imageGenStatus } = trpc.project.isImageGenConfigured.useQuery();
  const generateMutation = trpc.project.generateCover.useMutation();
  const uploadMutation = trpc.project.uploadCover.useMutation();
  const removeMutation = trpc.project.removeCover.useMutation();
@@ -207,7 +207,7 @@ export function CoverArtSection({ projectId, coverImageUrl, coverFocusY = 50, pr
          )}

          {/* Generate with AI */}
-          {dalleStatus?.configured && (
+          {imageGenStatus?.configured && (
            <button
              type="button"
              onClick={() => {