Skip to content

jphacks/tk_b_2513

Repository files navigation

Repic

IMAGE ALT TEXT HERE

製品概要

本プロダクトは、画像生成に不慣れなユーザーを支援する画像生成支援プラットフォームです。
ユーザーは新たに画像を生成する前に、他のユーザーが生成した画像とそのプロンプトを検索・閲覧できます。
これにより、既存画像の再利用効果的なプロンプト設計が可能になり無駄な生成コストを削減します。 主な利用シーンとしては、デザイナーを常駐させる余裕のない小規模企業やスタートアップでのプレゼン資料・SNS投稿用画像の生成支援を想定しています。

背景(製品開発のきっかけ、課題等)

開発の背景

近年、テキスト・画像・音声などを自動生成できる生成AIの技術が急速な進化をしており、教育・ビジネスなど様々な分野での活用が広がっています。[1][2]。一方で、年齢層・職業・地域によって生成AIの使用が進まない場合が考えられ、業務効率化や情報収集において、格差が生まれる可能性があります。 そこで、私たちは生成系AIの中でも特に画像生成AIについて、初心者や慣れていない人でも簡単に利用することのできる画像生成支援プラットフォームを開発しました。

既存のサービスの課題

MidjourneyChatGPTなどの画像生成AIでは、プロンプトを工夫することにより緻密な画像を生成することが可能です。ただし、生成系AIに慣れていない初心者にとっては意図した画像を得るまでに以下のような課題があります。

初心者が抱える課題:

  • プロンプトを入力してみたが、自分の意図した画像がなかなか返されずに、手間がかかる
  • そもそもどのようなプロンプトを入力したらよいか分からない

上記のように画像生成に使い慣れていない人は、画像生成をするための試行回数が増えたり、プロンプトの内容をどのように入力すれば良いか分からないといった課題があります。

想定されるシーン

  • デザイナーがいない企業で、限られたリソースの中で効率的に資料作成をしたい
  • 画像生成AIに興味はあるが、どのように使い始めれば良いか分からない

製品説明(具体的な製品の説明)

Repicは、画像生成AI初心者でも簡単に高品質な画像を生成できるWebアプリケーションです。ユーザーが入力したプロンプトに基づいて画像を生成するだけでなく、他のユーザーが生成した類似画像とそのプロンプトを参照できる機能を備えています。これにより、初心者でも効果的なプロンプトの書き方を学びながら、意図した画像を効率的に生成することができます。

デモ

以下のデモ動画では、零細企業に勤める建築会社の事業部の男性をペルソナとして、営業で使用するプレゼン資料のイメージ画像の生成の例を紹介しています。ここでは、スライドの含める予定の近未来の渋谷のビルやカフェのイメージ画像ついて、どのようなプロンプトを入力すれば自分の思い描く画像を生成することができるのかが分からないという課題があります。その課題に対して、他のユーザーの画像生成に使用されたプロンプトを参照することで、画像生成の支援を行っています。

Repic デモ動画 ↑ 画像をクリックするとYouTubeで動画が再生されます

デモ動画と一緒に見ていただきたい資料

また、以下のリンクから、本プロダクトを使用することができます。
https://repic-app.netlify.app/

デモユーザーログイン情報

メールアドレス

bshoda.ace@gmail.com

パスワード

jphackstkb2513

現在は検索可能なデータ数が少ないため、一部のキーワードのみで類似画像検索が可能です。

試していただきたい検索ワード
  • 「渋谷のビル」と検索
  • 他のユーザーのプロンプトをコピーして新規生成
ご自身での画像追加

もしヒットしない場合は、ぜひ新しい画像を生成してデータを増やしてみてください。 生成した画像とプロンプトは共有することもできその場合、他のユーザーの検索結果にも反映されます。

特長

1. 簡単なプロンプトでも利用可能

初心者でも使いやすいシンプルなインターフェースを提供。複雑なプロンプトを書かなくても、基本的なキーワードから画像生成を始めることができます。

2. 類似画像とプロンプトの参照機能

ベクトル検索(pgvector)を活用し、自分が入力したプロンプトに類似する他のユーザーの生成画像を閲覧可能。それぞれの画像に対応するプロンプトも確認することができ、効果的なプロンプト設計の学習にも役立ちます。

解決出来ること

画像生成AIの初心者において以下のことが実現可能になります

  • 試行回数の削減: 他のユーザーの成功例を参照し、意図した画像を早く生成
  • プロンプト作成の学習: 多様な実例から効果的な表現を学ぶことができる
  • 生成コストの削減:無駄なAPIコールや時間の浪費を防止

今後の展望

著作権対応機能

生成AIで画像を生成するケースとして、教育現場(大学の学会発表)や公に公開する資料など、著作権に違反しない画像を効率的に作成したいというニーズがあります。今後は以下の機能を追加予定です

  • 商用利用可能な画像の明示的な分類・フィルタリング機能
  • 用途別(教育、ビジネス、個人利用)のプロンプトテンプレート

その他の拡張機能

  • カテゴリ別検索: ビジネス・教育・デザインなど用途別の画像検索
  • 画像編集機能: 生成後の画像に対する簡易的な編集・調整機能

注力したこと(こだわり等)

  • 生成前に類似画像を検索することで、既存のプロンプト・画像を活用できるように設計
  • 生成したものをデータベースに保存することで他のユーザーがその画像を利用可能になるという形態のため、利用者が増えるほどサービスが充実する循環型の設計

開発技術

活用した技術

フレームワーク・ライブラリ・モジュール

フロントエンド

  • Next.js 15.5.6(App Router)
  • React 19.1.0
  • TypeScript 5
  • Tailwind CSS 4
  • shadcn/ui
  • @radix-ui/react-*

バックエンド・データベース

  • Next.js API Routes
  • Prisma 6.17.1
  • PostgreSQL
  • pgvector

外部API・サービス

  • OpenAI API(DALL·E 3, text-embedding-3-small)
  • Supabase

デプロイメント

  • Netlify

デザイン

  • Adobe Illustrator
  • figma

独自技術

ハッカソンで開発した独自機能・技術

プロンプトベースのベクトル検索システム(独自性: テキストから類似画像を検索)

既存のサービス(Google画像検索、Pinterest等)では、画像から類似する画像を検索する機能は一般的です。しかし、本システムの独自性はテキスト(プロンプト)から類似する画像とそのプロンプトを検索できる点に独自性があります。

  • 独自アプローチ: ユーザーが入力したプロンプトをOpenAI APIでベクトル化し、データベースに保存された他ユーザーの画像プロンプトのベクトルを類似度で比較
  • 実現方法: pgvector拡張機能を活用し、PostgreSQL上で高速なベクトル検索を実現。Prisma ORMと組み合わせた効率的なクエリ処理
  • ユーザー価値: 画像生成前に「似た内容の画像が既に生成されているか」「どのようなプロンプトで生成されたか」を確認でき、初心者の学習とコスト削減を支援

参考文献

  1. デジタル庁,テキスト生成AI利活用におけるリスクへの対策ガイドブック(α版)
  2. 文部科学省,初等中等教育段階における生成 AI の利活用に関するガイドライン

Releases

No releases published

Packages

 
 
 

Contributors