Zenn
🏟️

初めてのハッカソンの記録

2023/08/14に公開
Azure
#
ハッカソン
OpenAI
ChatGPT
tech

はじめに

初めてハッカソンというものに参加したので、その記録を残そうと思います。
今回参加したハッカソンは「KDDI 学生向けオンラインハッカソン 2023 SUMMER "イベントの新しい楽しみ方をデザインしよう"」です。

ハッカソン概要

テーマ

"イベントの新しい楽しみ方をデザインしよう"

スケジュール

以下の日程で、すべてオンラインで行われました。
1日目：オリエンテーション・チームビルディング
2日目：アイデアソン
3日目：ハックデイ1日目、懇親会
4日目：ハックデイ2日目

全部で4日間ありますが、開発できる期間はハックデイの2日間のみです。

チーム

計9チームで、1チーム学生5人＋チューター1人でした。

自分のチームは全員M1で、全国各地の学生が集まりました。

審査基準

  • アイデアに独創性、夢があるか
  • 情熱を持って取り組めたか
  • 持ち前の技術力を発揮できたか
  • 会場の参加者に共感を得られたか

成果物

背景

イベントの新しい楽しみ方、ということで今回は「イベントの待ち時間」に着目しました。

現在のスポーツ観戦や音楽ライブの観客は以下のような課題を抱えているのではないか、と考えました。

  • イベント中の待ち時間や休憩時間が暇になることが多い。
  • イベントの雰囲気が好きで、待ち時間や休憩時間もテンションを上げたままでいたい。

そんな課題を解決するため、今回考案したサービスが
全観客参加型ミニゲームイベント「InterActLive（インターアクトライブ）」です！

名前の由来

インターアクトライブという名前は「インタラクティブ」（InterActive）と「ライブ」（Live）を組み合わせた造語で、観客がライブイベントでインタラクティブに参加できることを表しています。

サービス概要

イベント中の待ち時間、休憩時間で全観客が参加可能なミニゲームを開催します。

今回はイベントとしてサッカーの試合を想定しました。

勝つたびにポイントがもらえ、貯まったポイントは景品に交換することができます。
以下がポイント交換の景品の例です。

100p：飲食割引券
試合当日にスタジアムで利用できる飲食物の割引券

300p：オフィシャルクラブグッズ
チームのマフラーやキャップ、ステッカー、バッジなどのグッズ

1000p：選手とのビデオ通話チケット
お気に入りの選手と個人的に交流できる貴重な機会！

実装

日本マイクロソフト株式会社がスポンサーとして参加していたので、「Azure OpenAI Service」を使うことができました。また、チームで話し合って、表彰の中にあるmicrosoft賞という特別賞を狙おうことになりました。そのため、ChatGPTを使ったwebアプリを実装することにしました。

今回はミニゲームとしてChatGPTによって作成したクイズを出題することにしました。
Webアプリケーション構成は以下のようになっています。

使用言語
フロントエンド：HTML、CSS、JavaScript
バックエンド：Python(Flask)

自分の担当部分について

チームメンバーが5人いたので、フロントエンド3人、バックエンド2人に分担して作業を行い、終わり次第、プレゼン資料作成に取り掛かることにしました。自分はバックエンド担当として、特に、ChatGPTによるクイズ出題の実装を行いました。

今回の想定はサッカーの試合のハーフタイムの問題の出題です。独自データ(前半の内容、スタジアムやチームに関する知識)から問題を出題したいので、Azure OpenAI Service「Add your data」を使用することで、それを可能にしました。

バックエンドの構成は以下の通りです。

FlaskからOpenAI API を呼び出します。DatasourceとしてAzure Cognitive Searchを設定することで、Azure OpenAI Service「Add your data」機能によって、独自データからChatGPTの回答を生成し、クイズの問題、選択肢、解答をテキストで受け取ります。

苦労したこと

ChatGPTの回答に「add your data 」機能によって独自データの紐づけることが大変でした。
PythonでOpenAI API を呼び出し、ChatGPTの回答を受け取るまでの実装は早い段階でできました。

import os
import openai
openai.api_type = "azure"
openai.api_base = "api_base"#https://OPENAI_MODEL_NAME.openai.azure.com/
openai.api_version = "2023-03-15-preview"
openai.api_key = "api_key"

#質問の設定
content = "prompt "

response = openai.ChatCompletion.create(
  engine="engine",#OPENAI_DEPLOYED_MODEL_NAME
  messages = [{"role":"system","content":"You are an AI assistant that helps people find information."},{"role":"user","content":content},],
  temperature=0,
  max_tokens=800,
  top_p=1,
  frequency_penalty=0,
  presence_penalty=0,
  stop=None)

print(response['choices'][0]['message']['content'])

しかし、この方法では独自データからChatGPTの回答を生成することができませんでした。
そのため、以下の記事を参考し、二つの方法で試しました。
1.「Add your data」からデプロイしたWeb Appsに対してAPIを叩く
2. Completions extensions APIを直接叩く
https://zenn.dev/microsoft/articles/azure-openai-add-your-data
https://zenn.dev/microsoft/articles/azure-openai-add-your-data-api
一つ目の方法はAzureの認証の問題でうまくいきませんでしたが、二つ目の方法で実装することができました。

import requests
import json
# 各種情報を設定
YOUR_RESOURCE_NAME = "YOUR_RESOURCE_NAME"#OPENAI_MODEL
YOUR_DEPLOYMENT_NAME = "YOUR_DEPLOYMENT_NAME"#OPENAI_MODEL_DEPLOY_NAME
YOUR_API_KEY = "YOUR_API_KEY"
YOUR_RESOURCE_URL = "YOUR_RESOURCE_URL"#https://YOUR_RESOURCE_NAME.openai.azure.com
YOUR_AZURE_COGNITIVE_SEARCH_ENDPOINT = "https://cogsearch-uk.search.windows.net/"#https://COGNITIVE_SEARCH_NAME.search.windows.net/
YOUR_AZURE_COGNITIVE_SEARCH_KEY = "YOUR_AZURE_COGNITIVE_SEARCH_KEY"
YOUR_AZURE_COGNITIVE_SEARCH_INDEX_NAME = "YOUR_AZURE_COGNITIVE_SEARCH_INDEX_NAME"

# URLを設定
url = f"{YOUR_RESOURCE_URL}/openai/deployments/{YOUR_DEPLOYMENT_NAME}/extensions/chat/completions?api-version=2023-06-01-preview"

chatgpt_url = f"{YOUR_RESOURCE_URL}/openai/deployments/{YOUR_DEPLOYMENT_NAME}/chat/completions?api-version=2023-06-01-preview"

# ヘッダーを設定
headers = {
        "Content-Type": "application/json",
        "api-key": YOUR_API_KEY,
        "chatgpt_url": chatgpt_url,
        "chatgpt_key": YOUR_API_KEY,
}

# データを設定
data = {
"dataSources": [
    {
	"type": "AzureCognitiveSearch",
	"parameters": {
	    "endpoint": YOUR_AZURE_COGNITIVE_SEARCH_ENDPOINT,
	    "key": YOUR_AZURE_COGNITIVE_SEARCH_KEY,
	    "indexName": YOUR_AZURE_COGNITIVE_SEARCH_INDEX_NAME,
	},
    },
],
"messages": [
    {
	"role": "user",
	"content": "prompt",
    },
],
}

# リクエストを送信し、レスポンスを取得
response = requests.post(url, headers=headers, data=json.dumps(data))
resp_json = response.json()
ques_response = resp_json['choices'][0]['messages'][1]['content']

結果

狙い通り、microsoft賞を頂くことができました！
しかも、「Add your data」機能の実装が評価されたということで、自分が担当した部分が評価されたことがとても嬉しかったです！

たくさんの景品がもらえました！

感想

「Add your data」機能の実装の実装は本当に苦労したところだったので、その苦労が報われて良かったです。チームメンバーと協力しながら、開発時間ギリギリまで挑戦し、最後の最後でようやく実装することができたものでした。また、実装するにあたって、Azureの仕様や、エラーの対処法について、microsoftの方々に何度も教えていただきました。本当にありがとうございました。

改善点

  • 開発に時間がかかりすぎてしまい、プレゼン資料作成にかける時間を十分に取ることができませんでした。他のチームのスライドは非常に洗練されたものだったので、自分たちもプレゼン資料作成の時間をしっかり確保するべきだったと感じました。
  • 今回、特別賞を頂くことができましたが、最優秀賞や優秀賞を取ることはできませんでした。ChatGPTの回答が安定せず、本番で期待する出力を得ることができなかったことがそれらの賞に届かなかった理由の一つであると思いました。自分たちのチームはアイデアソンで一位になったチームメンバーのアイデアをベースにしていたので、アイデア自体はとても良かっただけに、それを完璧に実装することができなかったことが悔やまれます。最優秀賞や優秀賞のチームのプロダクトは、本当に２日間で作ったものなのかと疑ってしまうくらい素晴らしかったです。文句なしの最優秀賞、優秀賞でした。

ソースコード

https://github.com/wagtail37/KDDIHacks2023-TeamC-web-develop
ソースコードだけでなく、実際に発表に使ったプレゼン資料も残しておきます。

まとめ

いろいろ書きましたが、なによりも楽しかったです！
本当に参加してよかったと思えるハッカソンでした。メンターさん、運営の方々、そして何よりもチームメンバーにはお世話になりました。ありがとうございました！

Discussion