This repository has been archived by the owner on Feb 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path203.html
133 lines (127 loc) · 9.68 KB
/
203.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="js/font.js"></script>
<title>実際にやってみた｜そこには”AI”がある。 ~ Future of Artificial Intelligence. ~</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div id="cont">
<div id="o_Filter"></div>
<header id="h"></header>
<script src="js/header.js"></script>
<div class="main">
<figure id="t">
<img src="img/img.png">
<h1>Try using AI</h1>
</figure>
<div id="grid">
<div></div>
<div class="article">
<div class="toc">
<div>
目次
<label><input type="checkbox" checked></label>
</div>
<ol>
<li>
<a href="javascript:link('203.html#l1')">実際にやってみた</a>
<ol>
<li><a href="javascript:link('203.html#l1_1')">画像生成AI</a></li>
<li><a href="javascript:link('203.html#l1_2')">活用事例-1: 課題の改良</a></li>
<li><a href="javascript:link('203.html#l1_3')">活用事例-2: コーディングの補助</a></li>
</ol>
</li>
</ol>
</div>
<h2 class="heading10" data-text="Tried it" id="l1"><span> 実際にやってみた</span></h2>
<p>
 このWebサイトを製作するにあたって、AIについての知見を深めるため、実際にAIを使用してみました。また、学校の先生方にも、どのような活用をしているかをお聞きしました。
</p>
<h3 id="l1_1">画像生成AI</h3>
<p class="narrow">
 画像生成AIは、単語や文章（プロンプトという）を入力することによって、それらのイメージに沿った写真やイラストを生成します。大量の画像やそれに関するデータが蓄積されているデータベースを基に、キーワードに合うものを選択して、要望に近い写真やイラストを生成することができます。<br>
 では、実際に画像生成AIを使用していきます。今回使用するのは、"Bing Image Creator"というサービスです。Microsoftが提供している画像生成サービスで、OpenAIの"DALL・E"というAIを採用しています。<br><br>
 ということで、さっそく画像を生成していきます。まずは簡単に、一単語だけで「猫」と入力してみます。
</p>
<figure>
<img class="insert" src="img/bing1.png">
<figcaption>スクリーンショット</figcaption>
</figure>
<p class="narrow">
<br> 30秒ほど待つと、4枚の画像が生成されました。まだ最初の段階ですが、かなり精度の高い画像が生成されたように思えます。簡単なイメージ画像ならば、こうした簡易的なプロンプトでも良い画像が生成できそうです。<br><br>
 しかし、今生成した画像はすべて三毛猫と観葉植物の組み合わせでできています。別種の組み合わせが欲しいときは、何度も生成を繰り返すことで違うタイプの画像を出すことが可能ですが、目当ての画像が生成されるまで繰り返すというのは、いささか面倒です。そこで、プロンプトにもっと細かい指定を加えてみましょう。
</p>
<figure>
<img class="insert" src="img/bing2.png">
<figcaption>スクリーンショット</figcaption>
</figure>
<p class="narrow">
<br> これは、「ベッドの上で眠っている白猫」というプロンプトから出力された結果です。前のプロンプトよりも命令が具体的になったことで、画像からシチュエーションが読み取りやすくなりました。また、AIが推測する部分が減ったことで、生成される画像がよりイメージに合ったものになりました。<br><br>
 ここまで生成した画像はすべて、現実に存在しうるものでした。しかし、プロンプトを変えれば、現実ではありえないような状況の画像も生成することができます。
</p>
<figure>
<img class="insert" src="img/bing3.png">
<figcaption>スクリーンショット</figcaption>
</figure>
<p class="narrow">
<br> また、このAIは多くの描き方ができるようになっています。例えば、先ほどのプロンプトに「アニメ風」という文言を追加してみると…
</p>
<figure>
<img class="insert" src="img/bing4.png">
<figcaption>スクリーンショット</figcaption>
</figure>
<p class="narrow">
 先ほどまでの写実的な画像とは打って変わって、イラスト寄りの画像が生成されるようになりました。<br><br>
 このように、画像生成AIを使用することで、簡単に自分のイメージ通りの画像を生み出すことができます。絵を描くのが苦手な人や、何らかの理由で絵が描けなくなってしまった人でも、こうしたツールを活用することで自分の想いを形にすることが簡単になるかもしれません。<br><br>
</p>
<figure>
<div class="insert force_aspect_ratio">
<img src="img/img.png">
</div>
<figcaption>AI生成</figcaption>
</figure>
<p class="narrow">
 ちなみに、ホームの一枚目にあるこの画像は、Bing Image Creatorを使用し、"Coexistence with AI"（AIとの共生）というプロンプトによって生成した画像です。
</p>
<h3 id="l1_2">活用事例-1: 課題の改良</h3>
<p class="narrow">
 ここからは、先輩・先生方の活用事例を紹介していきます。まずは、私たちが所属する情報システム部の顧問の、T先生にお話を伺いました。
</p>
<figure>
<img class="insert" src="img/utilization1.svg">
<figcaption>チーム制作</figcaption>
</figure>
<p class="narrow">
”私は、ChatGPT を活用して、生徒に出す課題の改良を行っています。<br>
以前は、生徒全員が同じテーマについてレポートを作成していました。ChatGPT を使用したことで、短時間で適切なテーマをいくつか提案することができ、個々の興味に合わせたテーマを選択できるようになりました。より深く探求されたレポートからは、生徒の興味関心の高まりを感じました。”（ T 先生）
</p>
<h3 id="l1_3">活用事例-2: コーディングの補助</h3>
<p class="narrow">続いて、当部活の部長であるM先輩にお話を伺いました。</p>
<video controls class="insert">
<source src="vid/Copilot.mp4">
<p>動画を再生できません</p>
</video>
<p class="narrow">
”私はソフトウェア開発を行う際に、GitHub Copilot の支援を受けながらコーディングをしています。GitHub Copilot は、GPT-4 をベースにした生成 AI で、コードを途中まで書くと、残りを AI が生成してくれます。<br><br>
関数名や変数名、開いているファイルから次のコードを推測してくれるので、とても便利です。例えば、エディター上で適切な関数名を書くと、必要な引数や処理、必要なバリテーションなどを予測し、体感 1 秒も経たないうちにコードを提案してくれます。また、ToDo リストのロジックをコーディングしているときに、「作成」のメソッドを書き終わると、「変更」や「削除」のメソッド名が提案され、Tab で補完させると、必要な引数や処理を予測してくれます。<br><br>
自分の変数名や関数名を適切に付けることは難しいことです。そんなときは、行いたい処理や要件を自然言語でコード内コメントに書くことで GitHub Copilot は関数名や変数名を提案し、処理まで予測して提案してくれます。なので、迷いがちな箇所でも特に役立っています。<br><br>
また、チャット機能やリファクタリングも行える Labs も公開されており、AI は進化をとどまることを知りません。しかし、生成されたコードに対してそのコードが使えるかの判断は不可欠で、自身のスキルがある程度必要ですが、そこに手を加えて自分が期待するコードを素早く実現することに一役買っていることは間違いないと思います。”（ M 先輩）
</p>
<div id="page_move">
<a href="javascript:link('202.html')"><span><< 2-2: 企業での活用</span></a>
<a href="javascript:link('301.html')"><span>3-1: 2045年問題 >></span></a>
</div>
</div>
<div></div>
</div>
</div>
<footer id="f"></footer>
<script src="js/footer.js"></script>
</div>
</body>
<script src="js/main.js"></script>
</html>