jphacks / C_2204

Parallel Memory

Parallel Memory

使ってみる！(実際のサイトに遷移)

製品概要

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

2022年現在，コロナ禍の影響により対面して誰かと話す機会が非常に少なくなりました. その中でも，現在の大学生は夢のキャンバスライフを妄想し入学したにも関わらず,友達と飲みに行ったり,旅行に行ったりと楽しい思い出を作れないまま，もうすぐ卒業してしまうという危機を迎えています！！！！！！！

そこで私たちはこの問題を解決するために，思い出作りの機会を作るのではなく思い出を捏造することにしました．


また，大学生以外でも，旅行に行きたくてもいけないといった問題は共通であり，行きたい場所の画像と自身を合成することにより”もし行けたらこんな感じ”を味わうことができます．アフターコロナではこのような利用方法を想定しています．

製品説明（具体的な製品の説明）

特長

1. さみしい写真に人を追加できます！

写真を撮ってみたけど，写っているのは自分だけ...

そんな悲しい写真をParallel Memoryにアップロードすれば，その写真を盛り上げてくれる人たちを自動で追加！ 後は，好きなところに配置するだけでにぎやかな写真の出来上がり！

これでボッチだなんて言わせないよ！

2. 好きな背景の中に自分を追加できます！

行きたい旅行先は無限大！ でも，お金も時間も友達もいない...

そんな時はParallel Memory！行きたい旅行先の画像と，自分の画像をアップロードすれば自分だけ切り取ってくれるので，後はそれっぽく配置するだけ！

後は友達に自慢しよう！(あれ，友達ってどこにいるんだろ...)

3. 画像を投稿、ダウンロードできます！

作った画像を見せる友達がいなくてももう安心！ Parallel Memoryには投稿機能も実装！

みんなの投稿も見れちゃいます！ 行きたい旅行先が同じ友達が見つかるかも！？

※他のSNSに投稿する際，必ずParallel Memoryで作成した合成画像であることを明記してください．

※その他，公序良俗に反する内容の作成及び投稿はやめましょう

解決出来ること

今後の展望

• いいね機能の実装
• タグの自動生成
• タグを指定して画像を作成
  • そのタグに関連する画像に自分を合成できるように

注力したこと（こだわり等）

• 画像の編集方法を2通り用意しました．
• REST APIによる実実装ので，ほかのアプリケーションからも呼び出して利用することもできます．

開発技術

活用した技術

API・データ

• https://www.photo-ac.com/から人物画像を利用
  • 背景を取り除いた画像の作成及び，タイムラインのサンプルデータとして使用

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

• Backend (実装したAPI一覧)
  • Python
    • Flask
    • waitress
    • rembg
• Frontend
  • TypeScript
  • Next.js
  • React Konva
  • Tailwind CSS
  • Headless UI
• Infrastructure
  • Nginx
  • MySQL
  • Docker
  • AWS(EC2, ALB, S3, Route53, Certificate Manager)
    • AWS利用による可用性の向上

デバイス

• server
  • AWSにて実行
• client(動作確認済み)
  • Windows (Chrome, Edge)
  • Mac (Chrome, Safari)
  • Android (Chrome)
  • iOS, iPadOS (Chrome, Safari)

独自技術

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

• server
  • 画像を，背景の削除を行ったり，AWS S3で管理する一連のフロー
• client
  • React Konvaを用いて画像の合成を行えるようにした
  • 画像をS3 Presigned URLを用いてAWS S3にアップロード