Uncategorized

最強AI「ChatGPT」にPythonで自己紹介サイトを作ってもらう方法

  /

ChatGPTとは、OpenAIが開発した自然言語処理モデルであり、自動文章生成、文章要約、翻訳などのタスクで高い精度を示しています。これまでのAIと比較して、対話能力が高く質問に対してそれなりに的確な文章を生成できることから、世間を騒がせました。

ChatGPTが人間の仕事を奪うかもしれないとかなんとかと騒いでいるのも束の間で、数ヶ月もせずに新モデルであるGPT-4が発表されることになります。GPT-4には、司法試験や医師試験を上位レベルで合格できるほどの能力が備わっていることが証明されており、もはや世界が大きく変わるのも時間の問題になってしまいそうです。

こんな人間を超えるような人工知能が続々と登場しているAI時代を生き残るために、私たちが取れる行動は次の3つくらいしかありません。

1. AIを作る技術者・研究者になる
2. AIを使いこなせるようになる
3. 労働する必要がないくらいの資産家になる

1,3は大勢の凡人には夢のまた夢の話です。つまり、私たちに残されている選択は、AIを使いこなせるようになるという道だけなのです。

そんなわけで、今回はAIを使いこなせるようになるべく、ChatGPTに自己紹介サイトを作ってもらうことにしました。

前提条件

プログラミング言語：
今回使うプログラミング言語はPythonです。Pythonでweb開発をすることはあまり無いと思いますが、最近よく話題になっている言語なので、Pythonを使うことにしました。

ライブラリ：
Pythonのweb開発ライブラリであるStreamlitを使います。HTMLやCSSを使うことなく、Pythonのみで作ることができます。Streamlitのインストール方法については、この記事がわかりやすいのでオススメです。

使用ツール：
ChatGPTのみを使用します。この記事の読者にも使ってもらいたいので、有料版ではなく無料版で作成します。

作成方法：
基本的なプログラムはChatGPTで作成します。イメージとしては、私がある程度ITに詳しい上司で、ChatGPTが優秀な部下という感じです。

実際に作ってみる

1.自己紹介サイトに必要なものを考える

まずは自己紹介サイトを作るにあたって、どのような項目が必要なのかを決めましょう。これくらい自分で考えろと言われそうですが、自分で考えるのも面倒なのでChatGPTに考えてもらいます。

素晴らしいアイデアを考えてくれました。自己紹介文やスキルは自分でも思いつきそうですが、ヘッダーやフッターはついつい忘れてしまいそうです。さっそくChatGPTがバリューを発揮してくれました。

2.基本的な構成で作られた自己紹介サイトのプログラムを生成する

ChatGPTが教えてくれた構成に従って、自己紹介サイトを作ってもらうことにしましょう。まずは、そのままの構成で自己紹介サイトの骨格を作ってもらいます。

さっそくそれっぽいプログラムが生成されました。先ほどの構成の要素であった６つの項目（フッター、自己紹介、スキル…）を不足することなく全て生成できているのがすごいですね。生成されたこのプログラムは、果たして実際に動作するのでしょうか。

見事にちゃんと表示できています。この段階で、すでに実生活でChatGPTを使う価値がありそうなことが証明されました。

ただ、このままだと背景色が真っ黒で殺風景な感じがするので、背景色を白にします。これについてもChatGPTに尋ねてみましょう。

一応答えてはくれたのですが、結論からいうとこの方法では背景を白くすることはできませんでした。ChatGPTも完璧では無いということなのでしょうか..

自分で調べてみたところ、.streamlitフォルダとその直下にconfig.tomlファイルを作成し、そこに背景色などの設定を記述する必要があるようです。
参考: Streamlit入門 – テーマの変更, ページの設定

これで背景色を白くすることができました！

3.プロフィール画像をいい感じにしてもらう

自己紹介サイトの骨格を作ることができたので、次はプロフィール画像を載せましょう。自己紹介サイトなのにプロフィール画像がないと、なんか物足りない感じになってしまいますよね。なので、プロフィール画像を表示するコードも生成してもらいましょう。

プロフィールにしたい画像を用意するところまで丁寧に説明してくれています。また、先ほど作成したプログラムの適切な場所にプロフィール画像を表示するコードを挿入していたり、プログラムが繰り返しになる部分は#以下略と省略してくれていたりするところに知性を感じてしまいそうです。

プロフィール画像はPexelsから入手してきました。修正した自己紹介サイトは以下の通り。

これで自己紹介サイトとしては最低限のものが出来上がりましたね！この段階で、そこらへんの新卒社員やインターン生よりも、スキルレベルや説明力という観点では引けを取らなそうです…

4.さらに追加情報の部分を生成してもらう

もう少し自己紹介サイトを拡充したいので、履歴書のように学歴・職歴欄を作ってもらうことにします。ここではさらに気の利いたことをしてもらいたいので、表形式で表示できるようにお願いします。

ChatGPTによると、pandasというライブラリをインポートして、作成してくれたコードをコピペすると学歴・職歴欄を作ることができるそうです。

ちゃんと学歴・職歴欄を追加することができました。本当に感動ですね。ここまでの作業で自己紹介サイトは完成です。

5.さらに追加情報の部分を生成してもらう

せっかくなので、ChatGPTに無理難題をお願いしてみることにします。

例えば、猫の画像を回転させてくださいというお願いをしたら、答えてくれるのでしょうか。人間のエンジニアにお願いしたら「めんどくさ…」と思わず言われてしまいそうなお願いです。

さすがChatGPTです。丁寧に答えてくれました。しかしながら、このコードを追加しても猫を回転させることはできませんでした。猫を回転させる処理をするCSSコード（<style></style>で囲まれた部分）は正しいのですが、st.image()で表示した画像にCSSが適用されていないのが問題のようです。無理難題はさすがにChatGPTにはまだ早かったですかね。

そこで質問の仕方を変えて、st.image()を使わない方法で、他に画像を出力する方法が無いかを聞いてみます。何度か質問をしながら試行錯誤していると、次のような回答が返ってきました。

なるほどですね！この方法を取り入れて、CSSを若干修正しながら出力してみます。ちなみにこの方法はうまくいったので、犬を拡大縮小し続けるコードも書いてもらいました。

人間が手助けしてあげる必要はあるものの、こんな無理難題にも答えてくれるChatGPTは神ツールといっても過言ではないでしょう。また、ChatGPTがリリースされてからすぐにGPT4が発表されている現状を踏まえると、１年後には今よりも遥かに進化してそうです。

最終的な自己紹介サイトとプログラムは以下の通りです。

自己紹介サイト：

プログラム：

import base64
import streamlit as st
import pandas as pd
from PIL import Image

# ヘッダー
st.title("自己紹介サイト")

# プロフィール画像を表示する
st.image("profile.jpg", width=300)

# 自己紹介セクション
st.header("自己紹介")
st.write("こんにちは、私は〇〇と申します。〇〇の専門性やスキル、経験、興味や関心事、特徴などについて簡単に説明します。")

# 猫の画像を表示する
with open("cat.png", "rb") as f:
    image = f.read()
b64_image = base64.b64encode(image).decode()
html_code = f'<div id="cat-container"><img id="cat-image" src="data:image/jpg;base64,{b64_image}"></div>'
cat_div = st.write(html_code, unsafe_allow_html=True)

# 猫の画像を回転するCSS
cat_style = f"""
<style>
#cat-container {{
    position: relative;
    width: 250px;
    height: 250px;
    padding: 50px
}}
#cat-image {{
    width: 150px;
    height: 150px;
    transform-origin: center center;
    animation: spin 2s linear infinite;
}}
@keyframes spin {{
    from {{ transform: rotate(0deg); }}
    to {{ transform: rotate(360deg); }}
}}
</style>
"""
st.write(cat_style, unsafe_allow_html=True)

with open("dog.png", "rb") as f:
    image = f.read()

b64_image = base64.b64encode(image).decode()
html_code = f'<img id="dog" src="data:image/jpg;base64,{b64_image}">'
st.write(html_code, unsafe_allow_html=True)

css = """
<style>
    #dog {
        max-height: 150px;
        max-width: 150px;
        animation: zoom 2s ease-in-out infinite;
        transform-origin: center;
    }
    
    @keyframes zoom {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(2);
        }
        100% {
            transform: scale(1);
        }
    }
</style>
"""

st.write(css, unsafe_allow_html=True)

# スキルセクション
st.header("スキル")
st.write("以下は私のスキルの一覧です。")
st.write("- Python")
st.write("- JavaScript")
st.write("- HTML/CSS")
st.write("- データ解析")
st.write("- 機械学習")

st.header("学歴")
df_education = pd.DataFrame({
    "学校名": ["〇〇大学", "〇〇高等学校"],
    "入学年": [2010, 2006],
    "卒業年": [2014, 2009],
    "学位": ["学士", "-"]
})
st.dataframe(df_education)

# 職歴を表形式で表示する
st.header("職歴")
df_work_experience = pd.DataFrame({
    "会社名": ["株式会社〇〇", "株式会社△△"],
    "職種": ["〇〇エンジニア", "△△デザイナー"],
    "期間": ["2014年4月〜2017年3月", "2017年4月〜現在"]
})
st.dataframe(df_work_experience)

# ポートフォリオセクション
st.header("ポートフォリオ")
st.write("以下は私が制作した作品やプロジェクトの一部です。")
st.write("- Webアプリケーション「〇〇」：リンク")
st.write("- データ分析レポート「〇〇」：リンク")

# お問い合わせセクション
st.header("お問い合わせ")
st.write("ご質問やお問い合わせがありましたら、下記フォームよりお問い合わせください。")

# フッター
st.write("© 2023 自己紹介サイト")
st.write("SNSアカウント：Twitter | LinkedIn | GitHub")

このプログラムのほとんど全てを機械が書いたものだと思うと、技術の進歩には本当に驚きです。人間側である程度の修正やリファクタリングをする必要はありますが、簡単なモジュールや関数を実装する場合なら、ChatGPTは強力な武器となりそうです。

まとめ

今回はChatGPTを使いながらPythonで自己紹介サイトを作成してみました。自己紹介サイトの構成も考えてくれて、人間側で１からコードを書くという作業も発生しませんでした。しかしながら、ChatGPTも万能というわけではなく、生成してもらったコードが正しいかどうかを検証するスキルは、まだまだ人間側に求められそうです。

したがって現段階でのChatGPTの活用方法としては、作りたいものの構成を考えてもらうとか、ちょっとした機能や関数のプログラムを実装してもらうとか、そういう使い方になるかと思われます。やはり、成果物を統合するタスクや、生成されたものが本当に正しいものなのかどうか、間違っているならどこを変更する必要があるのかという検証タスクについては、まだまだ人間が担う仕事になりそうです。

ChatGPT GPT-4
RELATED POST