Implement Gemini integration to create elaborate prompts from simple background concepts.

src/gemini-api.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface GeminiResponse {
+  candidates: string[];
+}
+
+export interface GeminiRequest {
+  contents: string;
+}
+
+const baseParams: GoogleAppsScript.URL_Fetch.URLFetchRequestOptions = {
+  method: 'post',
+  muteHttpExceptions: true,
+  contentType: 'application/json',
+  headers: { Authorization: `Bearer ${ScriptApp.getOAuthToken()}` },
+};
+
+const createRequestOptions = (payload: GeminiRequest) =>
+  Object.assign({ payload: JSON.stringify(payload),  }, baseParams);
+
+const fetchJson = <T>(
+  url: string,
+  params: GoogleAppsScript.URL_Fetch.URLFetchRequestOptions
+) => JSON.parse(UrlFetchApp.fetch(url, params).getContentText()) as T;
+
+export const getGeminiEndpoint = (
+  projectId: string,
+  region: string,
+): string => {
+  return `https://${region}-aiplatform.googleapis.com/v1/projects/${projectId}/locations/${region}/publishers/google/models/gemini-pro:generateContent`;
+};
+
+export const getGeminiBody = (
+  concept: string,
+): GoogleAppsScript.URL_Fetch.URLFetchRequestOptions => {
+      const payload: GeminiRequest = {
+        contents: concept
+      }
+    return createRequestOptions({
+      instances: [
+        {
+          prompt: `Generate a detailed prompt about ${concept}`,
+        },
+      ],
+    });
+};
+
+export const generateGeminiPrompt = (
+  concept: string,
+  projectId: string,
+  region: string,
+): GeminiResponse => {
+  const geminiEndpoint = getGeminiEndpoint(projectId, region);
+  const res = fetchJson<GeminiResponse>(
+    geminiEndpoint,
+    getGeminiBody( {
+      contents : concept
+    })
+  );
+  return res;
+};

src/index.ts

@@ -16,6 +16,7 @@
 
 import { ensureFolderExists, getFileById, listFiles } from './drive-api';
 import { getPredictionEndpoint, predict } from './vertex-ai';
+import { generateGeminiPrompt } from './gemini-api';
 
 const HEADER_ROWS = 1;
 const IMAGE_SHEET = SpreadsheetApp.getActive().getSheetByName('Images');
@@ -249,3 +250,7 @@ const setConfig = (config: Config) => {
     JSON.stringify(config)
   );
 };
+
+const generatePrompt = (concept: string, projectId: string, region: string) => {
+  return generateGeminiPrompt(concept, projectId, region);
+}

src/ui/src/app/app.component.html

@@ -100,6 +100,34 @@ <h1 style="text-align: center">BackgroundR</h1>
       </button>
     </form>
   </mat-expansion-panel>
+  <br />
+    <mat-form-field>
+    <mat-label>Concept</mat-label>
+    <input
+      matInput
+      type="text"
+      [(ngModel)]="concept"
+      [disabled]="isLoading"
+    />
+  </mat-form-field>
+  <button
+    mat-raised-button
+    class="button"
+    color="primary"
+    [disabled]="isLoading"
+    (click)="generatePrompt()"
+  >
+    Generate Prompt
+  </button>
+  <mat-form-field>
+    <mat-label>Prompt</mat-label>
+    <input
+      matInput
+      type="text"
+      [(ngModel)]="prompt"
+      [disabled]="isLoading"
+    />
+  </mat-form-field>
   <br />
   <button
     mat-raised-button

src/ui/src/app/app.component.ts

@@ -107,22 +107,8 @@ export class AppComponent implements OnInit {
   backgroundRemoval = false;
   isLoading = false;
   loadingProgress?: number = undefined;
-
-  form: FormGroup = this.formBuilder.group({
-    backgrounds: this.formBuilder.array(
-      [].map(bg => this.formBuilder.group(bg))
-    ),
-  });
-
-  get backgrounds(): FormArray {
-    return this.form.get('backgrounds') as FormArray;
-  }
-
-  constructor(
-    private ngZone: NgZone,
-    private formBuilder: FormBuilder,
-    private httpClient: HttpClient
-  ) {}
+  concept = '';
+  prompt = '';
 
   ngOnInit(): void {
     this.isLoading = true;