Feature/implement generate button (#23)

* generate button backend

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+make before_commit

Makefile

@@ -14,6 +14,10 @@ clean:
 test:
 	yarn test
 
+.PHONY: test_watch
+test_watch:
+	yarn test:watch
+
 .PHONY: test_coverage
 test_coverage:
 	yarn test:coverage

app/api/frames/createStamp/route.tsx

@@ -0,0 +1,27 @@
+import { Button, createFrames } from 'frames.js/next';
+import { StampService } from '../../../service/stampService';
+
+const frames = createFrames({
+  basePath: '/api/frames/createStamp',
+});
+
+const handleRequest = frames(async (ctx) => {
+  const template =
+    'スタイルはキティちゃんのようにシンプルで愛らしいキャラクターのLINEスタンプを生成してください。ポーズはセリフに合わせて適切に変化させてください。セリフ：';
+  const service = new StampService(template);
+  const image_url = await service.generateImageUrl(ctx.message?.inputText);
+
+  return {
+    image: image_url,
+    imageOptions: {
+      aspectRatio: '1:1',
+    },
+    buttons: [
+      <Button action="link" target="https://google.com" key="">
+        {ctx.message?.inputText}
+      </Button>,
+    ],
+  };
+});
+
+export const POST = handleRequest;

app/page.tsx

@@ -80,7 +80,11 @@ export default async function Home({ searchParams }: NextServerPageProps) {
           </div>
         </FrameImage>
         <FrameInput text="Please enter a prompt" />
-        {!state.generated ? <FrameButton>generate</FrameButton> : null}
+        {!state.generated ? (
+          <FrameButton action="post" target="/api/frames/createStamp">
+            generate
+          </FrameButton>
+        ) : null}
         {state.generated ? <FrameButton>initialize</FrameButton> : null}
         {state.generated ? <FrameButton>Mint</FrameButton> : null}
         {state.generated ? <FrameButton>Share</FrameButton> : null}

app/repository/stampRepository.ts

@@ -0,0 +1,22 @@
+import OpenAI from 'openai';
+
+export class StampRepository {
+  constructor(private openai = new OpenAI()) {}
+
+  async generateImage(prompt: string): Promise<string> {
+    try {
+      const imageResponse = await this.openai.images.generate({
+        model: 'dall-e-3',
+        prompt: prompt,
+        n: 1,
+        size: '1024x1024',
+      });
+      const imageUrl = imageResponse.data[0]?.url || '';
+
+      return imageUrl;
+    } catch (error) {
+      console.error('Error generating image:', error);
+      throw new Error('Image generation failed');
+    }
+  }
+}

app/service/stampService.ts

@@ -0,0 +1,19 @@
+// stampService.js
+import { StampRepository } from '../repository/stampRepository';
+
+export class StampService {
+  private template: string;
+
+  constructor(
+    template: string,
+    private stampRepository: StampRepository = new StampRepository()
+  ) {
+    this.template = template;
+  }
+
+  async generateImageUrl(input: string): Promise<string> {
+    const prompt = this.template + input;
+    const imageUrl = await this.stampRepository.generateImage(prompt);
+    return imageUrl;
+  }
+}

package.json

@@ -33,6 +33,7 @@
     "frames.js": "^0.9.3",
     "lucide-react": "^0.331.0",
     "next": "^14.1.0",
+    "openai": "^4.29.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss-animate": "^1.0.7"
@@ -57,12 +58,12 @@
     "rimraf": "^5.0.5",
     "tailwindcss": "^3.3.0",
     "textlint": "^14.0.4",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.3.3",
     "textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet": "^1.0.1",
     "textlint-rule-no-mixed-zenkaku-and-hankaku-number": "^1.0.0",
     "textlint-rule-preset-ja-spacing": "^2.2.0",
     "textlint-rule-preset-ja-technical-writing": "^10.0.1",
-    "textlint-rule-spellcheck-tech-word": "^5.0.0"
+    "textlint-rule-spellcheck-tech-word": "^5.0.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3"
   }
 }

tests/stampRepository.test.ts_tmp

@@ -0,0 +1,54 @@
+// import OpenAI from 'openai';
+// import { StampRepository } from '../app/repository/stampRepository';
+
+// jest.mock('openai', () => {
+//   return {
+//     OpenAI: jest.fn().mockImplementation(() => {
+//       return {
+//         images: {
+//           generate: jest.fn().mockResolvedValue({
+//             data: [
+//               {
+//                 url: 'mockImageUrl',
+//               },
+//             ],
+//           }),
+//         },
+//       };
+//     }),
+//   };
+// });
+
+// describe('StampRepository', () => {
+//   let stampRepository: StampRepository;
+
+//   beforeEach(() => {
+//     stampRepository = new StampRepository();
+//   });
+
+//   it('should return an image URL when generateImage is called', async () => {
+//     const prompt = 'test prompt';
+//     const imageUrl = await stampRepository.generateImage(prompt);
+
+//     // 正しい画像URLが返されることを確認
+//     expect(imageUrl).toBe('mockImageUrl');
+//     // OpenAI.images.generateが適切な引数で呼び出されたことを確認
+//     expect(OpenAI.prototype.images.generate).toHaveBeenCalledWith({
+//       model: 'dall-e-3',
+//       prompt: prompt,
+//       n: 1,
+//       size: '1024x1024',
+//     });
+//   });
+
+//   it('should throw an error if the OpenAI API call fails', async () => {
+//     // OpenAI.images.generate メソッドを失敗させるようにモックを設定
+//     OpenAI.prototype.images.generate.mockRejectedValue(
+//       new Error('API call failed')
+//     );
+
+//     await expect(stampRepository.generateImage('test prompt')).rejects.toThrow(
+//       'Image generation failed'
+//     );
+//   });
+// });