はじめに

本記事は#AWSAmplifyJP Advent Calendar 2023の13日目の記事です。
クソアプリ Advent Calendar 2023に参加するために、ChatGPTでDalle(画像生成)用のプロンプトを作りました。
尚、アプリの機能は下記記事で紹介しています。

Demo

使った技術

この記事では使った技術を紹介したいと思います。

Amplify

Amplifyの機能を多く使ったので、コード等とともに紹介します。

Figma to Code

まず、FigmaでLPや、Webアプリのコンポーネントを作り、Figma to Code機能でReactのコードを得ました。アプリの種類にもよりますが、自分でゼロからコード書く場合の数分の一から半分のコーディングで済みます。AIにコードを書いてもらうvercelのv0等が最近登場しましたが、個人的にはプロンプトで指示するよりGUIで書いたものがコードになる方が好きです。

自動生成されたReactコードの一例

HeroView.jsx

/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import * as React from "react";
import { getOverrideProps } from "./utils";
import { Button, Flex, Image, Text } from "@aws-amplify/ui-react";
export default function HeroView(props) {
  const { overrides, ...rest } = props;
  return (
    <Flex
      gap="0"
      direction="row"
      width="1490px"
      height="unset"
      justifyContent="center"
      alignItems="center"
      position="relative"
      padding="0px 0px 0px 0px"
      {...getOverrideProps(overrides, "HeroView")}
      {...rest}
    >
      <Flex
        gap="10px"
        direction="column"
        width="720px"
        height="392px"
        justifyContent="space-between"
        alignItems="center"
        shrink="0"
        position="relative"
        padding="0px 0px 0px 0px"
        {...getOverrideProps(overrides, "Frame 3")}
      >
        <Flex
          gap="24px"
          direction="column"
          width="316px"
          height="unset"
          justifyContent="center"
          alignItems="center"
          grow="1"
          shrink="1"
          basis="0"
          position="relative"
          padding="0px 0px 0px 0px"
          {...getOverrideProps(overrides, "HeroMessage")}
        >
          <Flex
            gap="16px"
            direction="column"
            width="unset"
            height="unset"
            justifyContent="center"
            alignItems="center"
            shrink="0"
            alignSelf="stretch"
            position="relative"
            padding="0px 0px 0px 0px"
            {...getOverrideProps(overrides, "Message")}
          >
            <Text
              fontFamily="Inter"
              fontSize="16px"
              fontWeight="700"
              color="rgba(64,170,191,1)"
              lineHeight="24px"
              textAlign="center"
              display="block"
              direction="column"
              justifyContent="unset"
              width="unset"
              height="unset"
              gap="unset"
              alignItems="unset"
              shrink="0"
              alignSelf="stretch"
              position="relative"
              padding="0px 0px 0px 0px"
              whiteSpace="pre-wrap"
              children="Easy Image"
              {...getOverrideProps(overrides, "Eyebrow")}
            ></Text>
            <Text
              fontFamily="Inter"
              fontSize="24px"
              fontWeight="600"
              color="rgba(13,26,38,1)"
              lineHeight="30px"
              textAlign="center"
              display="block"
              direction="column"
              justifyContent="unset"
              width="unset"
              height="unset"
              gap="unset"
              alignItems="unset"
              shrink="0"
              alignSelf="stretch"
              position="relative"
              padding="0px 0px 0px 0px"
              whiteSpace="pre-wrap"
              children="画像を簡単に生成"
              {...getOverrideProps(overrides, "Heading")}
            ></Text>
            <Text
              fontFamily="Inter"
              fontSize="16px"
              fontWeight="400"
              color="rgba(48,64,80,1)"
              lineHeight="24px"
              textAlign="center"
              display="block"
              direction="column"
              justifyContent="unset"
              letterSpacing="0.01px"
              width="unset"
              height="unset"
              gap="unset"
              alignItems="unset"
              shrink="0"
              alignSelf="stretch"
              position="relative"
              padding="0px 0px 0px 0px"
              whiteSpace="pre-wrap"
              children="生成したい画像について簡単に伝えるだけで、自動で画像生成用のプロンプトを作り、実行できます。"
              {...getOverrideProps(overrides, "Body")}
            ></Text>
          </Flex>
          <Button
            width="unset"
            height="unset"
            shrink="0"
            size="large"
            isDisabled={false}
            variation="primary"
            children="試してみる"
            {...getOverrideProps(overrides, "Button")}
          ></Button>
        </Flex>
      </Flex>
      <Image
        width="720px"
        height="392px"
        display="block"
        gap="unset"
        alignItems="unset"
        justifyContent="unset"
        shrink="0"
        position="relative"
        padding="0px 0px 0px 0px"
        objectFit="cover"
        {...getOverrideProps(overrides, "1700652527621-cat 1")}
      ></Image>
    </Flex>
  );
}

Amplify Form Builder, react-modal

入力フォームはForm Builderで作りました。react-modalで、一つのフォームが入力終わって送信されたら次のモーダルが開くようにしました。

コード

createSaveImageModal.tsx


"use client";
import Modal from "react-modal";
import { CreatedImage } from "@/models";
import {
  createFromDalleAndSaveToS3,
  getSignedS3UrlFromKey,
} from "@/utils/createSaveImage";
import { Button, Flex, Loader } from "@aws-amplify/ui-react";
import { DataStore } from "aws-amplify/datastore";
import React, {
  ChangeEvent,
  useState,
} from "react";
import PromptCreateForm from "@/ui-components/PromptCreateForm";
import PromptEditForm from "@/ui-components/PromptEditForm";
import createPrompt from "@/utils/chat";
import ImageCreateSuccessView from "@/ui-components/ImageCreateSuccessView";

export default function CreateSaveImageModal({
  openApiKey,
}: {
  openApiKey: string;
}) {
  const [modalToOpen, setModalToOpen] = useState("");
  const [generationTarget, setGenerationTarget] = useState("");
  const [adjective, setAdjective] = useState("");
  const [languageOfPrompt, setLanguageOfPrompt] = useState("");
  const [numberOfWordsPrompt, setNumberOfWordsPrompt] = useState("");
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [loadingDalle, setLoadingDalle] = useState(false);
  const createImage = async (prompt: string) => {
    setLoadingDalle(true);
    const key = await createFromDalleAndSaveToS3(openApiKey, prompt);
    const url = await getSignedS3UrlFromKey(key);
    setImageUrl(url);
    DataStore.save(new CreatedImage({ title: prompt, s3Url: key }));
    setLoadingDalle(false);
  };
  const onSubmitPromptCreateForm = async () => {
    setModalToOpen("CreatingPrompt");
    const resp = await createPrompt({
      openApiKey: openApiKey,
      generationTarget: generationTarget,
      adjective: adjective,
      languageOfPrompt: languageOfPrompt,
      numberOfWordsPrompt: numberOfWordsPrompt,
    });
    setPrompt(resp);
    setModalToOpen("PromptEditForm");
  };
  const onSubmitPromptEditForm = async () => {
    setModalToOpen("CreatingImage");
    await createImage(prompt);
    setModalToOpen("ImageCreateSuccessView");
  };
  return (
    <>
      {loadingDalle ? (
        "Creating Image..."
      ) : (
        <Button
          variation="primary"
          onClick={() => setModalToOpen("PromptCreateForm")}
        >
          プロンプトを作って画像を生成する
        </Button>
      )}
      <Modal isOpen={modalToOpen == "PromptCreateForm"}>
        <PromptCreateForm
          onSubmit={onSubmitPromptCreateForm}
          overrides={{
            generationTarget: {
              value: generationTarget,
              onChange: (event: ChangeEvent<HTMLInputElement>) =>
                setGenerationTarget(event.target.value),
            },
            adjective: {
              value: adjective,
              onChange: (event: ChangeEvent<HTMLInputElement>) =>
                setAdjective(event.target.value),
            },
            languageOfPrompt: {
              value: languageOfPrompt,
              onChange: (event: any) => {
                setLanguageOfPrompt(event.target.value);
                // console.log("languageOfPrompt:", languageOfPrompt);
              },
            },
            numberOfWordsPrompt: {
              value: numberOfWordsPrompt,
              onChange: (event: any) => {
                setNumberOfWordsPrompt(event.target.value);
                console.log("numberOfWordsPrompt:", numberOfWordsPrompt);
              },
            },
          }}
        />
      </Modal>
      <Modal isOpen={modalToOpen == "CreatingPrompt"}>
        <Flex
          height="100%"
          direction="column"
          alignItems="center"
          justifyContent={"center"}
        >
          {"プロンプトを生成しています。。。"}
          <Loader variation="linear" />
        </Flex>
      </Modal>
      <Modal isOpen={modalToOpen == "PromptEditForm"}>
        <PromptEditForm
          onSubmit={onSubmitPromptEditForm}
          overrides={{
            Field0: {
              defaultValue: prompt,
              value: prompt,
              onChange: (event: any) => {
                let { value } = event.target;
                setPrompt(value);
              },
            },
          }}
        />
      </Modal>
      <Modal isOpen={modalToOpen == "CreatingImage"}>
        <Flex
          height="100%"
          direction="column"
          alignItems="center"
          justifyContent={"center"}
        >
          {"画像を生成しています。。。"}
          <Loader variation="linear" />
        </Flex>
      </Modal>
      <Modal isOpen={modalToOpen == "ImageCreateSuccessView"}>
        {imageUrl != "" && (
          <ImageCreateSuccessView
            overrides={{
              "1700652527621-cat 1": { src: imageUrl },
              Button: {
                onClick: () => {
                  setModalToOpen("");
                  setImageUrl("");
                },
              },
              prompt: { children: prompt },
            }}
          />
        )}
      </Modal>
    </>
  );
}

Datastore, Figma to CodeのCollection

生成したプロンプトや画像の一覧はDatastoreに保存し、Figma to Codeで作ったコンポーネントを使って表示するようにしました。Collectionという、Figmaで作ったコンポーネントを複数表示する機能を使いました。

コード

showImageCollection.tsx

"use client";
import { CreatedImage } from "@/models";
import ImageCardViewCollection from "@/ui-components/ImageCardViewCollection";
import { getSignedS3UrlFromKey } from "@/utils/createSaveImage";
import { DataStore, Predicates, SortDirection } from "aws-amplify/datastore";

import { useEffect, useState } from "react";

export default function App() {
  const [url, setUrl] = useState("");
  const [createdImages, setCreatedImages] = useState<CreatedImage[]>([]);

  const fetchCreatedImage = async () => {
    const resp = await DataStore.query(CreatedImage, Predicates.ALL, {
      sort: (s) => s.createdAt(SortDirection.DESCENDING),
    });
    setCreatedImages([]);
    const imgs: CreatedImage[] = [];
    resp.forEach(async (item) => {
      const urlResp = await getSignedS3UrlFromKey(item.s3Url);
      await setUrl(urlResp);
      const img: CreatedImage = new CreatedImage({
        title: item.title,
        s3Url: urlResp,
      });
      imgs.push(img);
    });
    setCreatedImages(imgs);
  };
  useEffect(() => {
    fetchCreatedImage();
    const subscription =
      DataStore.observe(CreatedImage).subscribe(fetchCreatedImage);
    return () => {
      subscription.unsubscribe();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <>
      <ImageCardViewCollection
        items={createdImages}
        overrideItems={({ item, index }) => ({
          overrides: { ImageCardView: { width: "100%" } },
        })}
      />
    </>
  );
}

S3

生成した画像はAmplify経由でS3に格納し、一覧表示するときはSignedURLを取得するようにしました。

コード

createSaveImage.ts

export async function uploadBlobToS3(blob: Blob) {
  const key = `${Date.now()}-cat.png`;
  try {
    const result = await uploadData({
      key: key,
      data: blob,
      options: { accessLevel: "guest", contentType: "image/png" },
    }).result;
    console.log("Succeeded: ", result);
  } catch (error) {
    console.log("Error : ", error);
  }
  return key;
}

export async function getSignedS3UrlFromKey(key: string) {
  const getUrlResult = await getUrl({
    key: key,
    options: { validateObjectExistence: false, expiresIn: 20 },
  });
  return getUrlResult.url.toString();
}

認証(パスワード、Googleログイン)

Amplifyでは認証はfirebase等と同じ感覚でかんたんに導入できます。GoogleログインはGCPとの間でAPI Key等を相互に参照するので、GUIで少し設定が必要です。

コード

return (
    <Authenticator>
      {children}
    </Authenticator>
  );

Nextjs 14

Amplify HostingでNextjs 14を使う場合は、Amazon Linux 2023をビルドイメージに使うだけです。Nextjs 14がリリースされてしばらくしてからサポートされました。
https://github.com/aws-amplify/amplify-hosting/issues/3773

Langchain, ChatGPT API

ここからはAmplifyとは別の今回使った技術です。最初にChatGPTにプロンプトを送って、ChatGPTに画像生成用のプロンプトを作ってもらいますが、ユーザーが入力した単語や数字等をプロンプトに埋め込むのにLangchainのLCEL (LangChain Expression Language）を使いました。

コード

chat.ts

"use server";
import { PromptTemplate } from "langchain/prompts";
import { ChatOpenAI } from "langchain/chat_models/openai";
export default async function createPrompt({
  openApiKey,
  generationTarget,
  adjective,
  languageOfPrompt,
  numberOfWordsPrompt,
}: {
  openApiKey: string;
  generationTarget: string;
  adjective: string;
  languageOfPrompt: string;
  numberOfWordsPrompt: string;
}) {
  const model = new ChatOpenAI({ openAIApiKey: openApiKey });
  console.log("languageOfPrompt:", languageOfPrompt);
  const promptTemplate = PromptTemplate.fromTemplate(
    `下記条件でDalleに出力させるためのプロンプトを考えてください。箇条書きではなく文章で

生成したいもの: {generationTarget}
どんな画像にしたいか: {adjective}
制約1:プロンプトのみを返してください。プロンプトの説明は不要です。
制約2:プロンプトは一つだけ作成してください。
制約3:プロンプトは出力が美しくなるように{numberOfWordsPrompt}単語前後で詳細に作成してください。
プロンプトの言語:{languageOfPrompt}
`
  );

  const chain = promptTemplate.pipe(model);
  console.log(chain);
  const result = await chain.invoke({
    generationTarget: generationTarget,
    adjective: adjective,
    languageOfPrompt: languageOfPrompt,
    numberOfWordsPrompt:
      numberOfWordsPrompt && numberOfWordsPrompt != ""
        ? numberOfWordsPrompt
        : "20",
  });
  console.log(result);
  return String(result.content);
}

Dalle API

Ddalle APIはresponse_formatにb64_jsonを指定して、画像を取得しました。

コード

createDalleImageAsBase64.ts

"use server";
import OpenAI from "openai";
export async function createDalleImageAsBase64({
  openApiKey,
  prompt,
}: {
  openApiKey: string;
  prompt: string;
}) {
  const openai = new OpenAI({
    apiKey: openApiKey,
  });
  const image = await openai.images.generate({
    model: "dall-e-2",
    prompt: prompt,
    response_format: "b64_json",
    size: "256x256",
  });
  const b64_json: string = image.data[0].b64_json ? image.data[0].b64_json : "";
  return b64_json;
}

b64-to-blob

取得した画像をS3に格納する前に、blobに変換しました。

コード

createSaveImage.ts

export async function createFromDalleAndSaveToS3(
  openApiKey: string,
  prompt: string
) {
  const b64_json = await createDalleImageAsBase64({
    openApiKey: openApiKey,
    prompt: prompt,
  });
  const blob = b64toblob(b64_json);
  const key = await uploadBlobToS3(blob);
  return key;
}

まとめ

AmpliifyやChatGPTのAPIを使うとスピーディーにアプリが作れるので、プロトタイピングだけでなくハッカソンにもお勧めです。