yoppa.org

前橋工科大学 – 工学デザイン実習 II 2024

生成AIと創造性、生成AIでプログラミング

本日の実習では、まず前回の課題「生成コレクション」の提出を行います。その後、生成AIと創造性についての動画を視聴し生成AIがもたらす可能性と問題について考えます。その後、生成AIを使ってp5.jsでプログラミングを行います。最後に、最終課題について説明します。

スライド資料

本日の内容

  • 前回の課題「生成コレクション」の提出
  • AIと創造性
  • 生成AIでプログラミング
  • 実習: 生成AI + p5.jsで「顔」を描く
  • 最終課題について「生成AIと生成芸術」

前回の課題「生成コレクション」の提出

以下の手順で提出してください。

  1. figma.com にアクセスしてログイン
  2. レイアウトした「生成コレクション」を開く
  3. 画面右上の「共有」ボタンをクリック
  4. 表示されるポップアップ画面の「リンクをコピー」をクリック

コピーしたURLを下記のフォームに貼り付けて提出

https://x.gd/My4pG

  • 未提出の人は今週中に必ず提出!! 絶対!!
  • 課題未提出のままだと落第します。

「生成コレクション」の発表と講評

  • 来週(12/23)、一人ずつ発表してもらいます
  • 特別選抜で工学デザインプログラムに合格した高校生の見学あり
  • 以下の内容を含めて発表してください
    • 作品タイトル
    • 作品のテーマ – どのような意図で画像を集めたのか
    • 画像生成AIを使用した感想

アンケート: 今回もMentimeterでアンケートを実施します!

AIと創造性

「AIと創造性に関する」2種類の動画を視聴

How This Guy Uses A.I. to Create Art | Obsessed | WIRED

  • 生成AIによる創作を肯定的に紹介

AI Art: How artists are using and confronting machine learning | HOW TO SEE LIKE A MACHINE

  • 生成AIによる創作に対するよりクリティカル(批判的)な視点

参考資料

Refik Anadole, Unsupervised — Machine Hallucinations — MoMA (2023)

KATE Crawfordt, Trevor Paglen, Training Humans

Trevor Paglen, Behold these Glorious Times! (2020)

Kate Crawford, Vladan Joler, Anatomy of an AI System (2018)

Kate Crawford, Vladan Joler, Calculating Empires: A Genealogy of Power and Technology, 1500-2025

ここまでのポイント

  • 生成AIの技術はとても強力で新たな表現を生みだす可能性に満ちている
  • しかし、その背後には様々な問題も存在する
    • データの偏り
    • 巨大企業による独占
    • 大量なエネルギーの消費
    • プライバシーの問題
    • 著作権侵害のリスク
    • フェイクニュース
    • AIのブラックボックス化
      …etc.
  • 生成AIを完全に拒否するわけではない
  • しかし無批判に全て受け入れるのでもない
  • 生成AIの利便性を享受しつつ、その問題や構造について批判的に考えていきたい
  • そのためには、生成AIの技術について正確なイメージを持つ必要 (!= 魔法)

生成AIでプログラミング

コーディングの題材: p5.jsの簡単な紹介

  • p5.js は、プログラミング初心者でも簡単に使えるJavaScriptのライブラリ
  • ProcessingのJavaScript版
  • 画面上に図形を描いたり、アニメーションを作ったりできる
  • 公式サイトには多くのチュートリアルやリファレンスがあり
  • 活発なコミュニティによるサポート
  • 生成AIの力を借りて、p5.jsでプログラミングをしてみよう

p5.jsでどんなことができるのか – OpenProcessing

https://openprocessing.org

  • p5.jsを用いたプログラムをオンラインで作成・共有できるサービス
  • 世界中のクリエイティブコーダーが作成した作品がソースコードを含めて閲覧できる!

簡単なプログラム例

function setup() {
  // 画面全体にキャンバス作成
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  // 背景をグレーに
  background(220);
  // 円を描く
  circle(width / 2, height / 2, 400);
}

※ 現段階では全く意味が分からなくてOK!

実行結果

このようなプログラムをAIの力を借りて生成してみましょう!

AIによるコーディング 1 : ChatGPTに質問する

  • おそらく最も手軽に始められる方法
  • ChatGPTにコーディングの質問をするだけ

例:

ブラウザの画面中央に円を描くプログラムを作りたいです。どのようにすればよいでしょうか？表示領域はフルスクリーンにしてください。使用する開発環境は、p5.jsを使用してください。

ChatGPT 4oに質問してみました。

p5.js を使用してブラウザの画面中央に円を描くプログラムを作成するには、以下のようにコードを書きます。p5.jsは簡単にキャンバスを作成し、グラフィックを描画できるライブラリです。

以下は、フルスクリーンのキャンバスに円を描くシンプルなコードです。

プログラム例

function setup() {
  // ウィンドウサイズに合わせてフルスクリーンキャンバスを作成
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220); // 背景色（薄いグレー）

  // 円の色を設定
  fill(100, 150, 255); // 青系の塗り色
  noStroke(); // 円の境界線をなしに

  // 画面中央に円を描く
  let centerX = width / 2;
  let centerY = height / 2;
  let diameter = 100; // 円の直径

  ellipse(centerX, centerY, diameter, diameter);
}

function windowResized() {
  // ウィンドウサイズが変更されたとき、キャンバスを再調整
  resizeCanvas(windowWidth, windowHeight);
}

コードの説明

  1. setup 関数:
    • createCanvas(windowWidth, windowHeight) を使って、ブラウザウィンドウ全体をキャンバスとして利用。
  2. draw 関数:
    • background(220) で背景を塗りつぶし、リセット。
    • ellipse(centerX, centerY, diameter, diameter) を使い、画面の中心に直径 100 の円を描画。
  3. windowResized 関数:
    • ウィンドウサイズが変更されたときにキャンバスのサイズを自動調整。

実行手順

  1. p5.js Webエディタ を開きます。
  2. 上記のコードをコピーペーストします。
  3. 「再生」ボタンを押すと、ブラウザ画面全体に円が表示されます。

必要に応じて円の色やサイズを変更してみてください！

実行結果 (完璧!!)

実習: ChatGPTによるコード生成を試してみる

  • ChatGPTにp5.jsで生成したいコードをリクスト
  • 冒頭で「p5.jsで」などと制作環境を指定すると良い
  • 生成されたコードをp5.js Web Editorにコピー&ペースト
  • コードを実行してみる

AIによるコーディング 2 : AI機能を搭載したエディターを使う

もっと高度な機能を利用したい!

  • よりインタラクティブに生成結果をみながらAIのサポートを受けたい
  • エラーが発生した際にもAIに助けて欲しい
  • あらかじめ作成したコードをAIに改良して欲しい

p5.CodingWithAIを使ってみる

  • https://app.kyabe.net/p5-coding-with-ai/
  • ChatGPTとの連携機能を搭載した自作のp5.jsのWebエディタ
  • きゃべ / Masaya Kurahashiさん作
  • ユーザーが自然言語でAIにリクエストを送信すると、AIが解説とともにリクエストに合わせたコードを提案する。
  • 提案されたコードを基にユーザーが工夫を凝らし、作品を創作することで、人間とAIの共創の実現性を探求。

詳細な使用方法は、実際にデモをしながら解説していきます!

ちなみに先程と同じChatGPTにした質問をp5.CodingWithAIに送ってみました
→ 完璧!

実習: p5.CodingWithAIでコード生成

  • 最初にプロンプトから基本となるコードを生成
  • 質問をくりかえしながら、徐々に自分の好みの生成結果に近づけていく
  • 提案されたコードを受け入れるかは、その都度吟味する
  • 最終的にどのようなコードが完成するのか!?

参考: AIによるコーディング 3 : さらに高度なAIとの連携

Github Copilotを使用してみる

※ この方法は環境設定やユーザー登録などが少し難解なので必須ではありません。興味のある方はぜひ挑戦してみてください!

GitHub Copilotは、OpenAIのCodexを基盤としたAIペアプログラミングツールである。主にプログラマーのコード作成を支援することを目的としており、エディタ内でリアルタイムにコード提案を行う。コード補完、関数生成、コメントからのコード生成など、多様な支援機能を備える。主要なIDEやエディタ（Visual Studio Codeなど）に統合可能で、多言語対応であることも特徴である。効率的なコーディングを実現し、初心者から上級者まで幅広いユーザーに対応するツールである。

https://github.com/features/copilot

GitHub Copilotの主な機能

  • コード補完：開発者がコードを入力する際、次に来るであろうコードを予測し、提案する。
  • 関数生成：関数名やコメントから、対応する関数のコードを自動生成する。
  • コメントからのコード生成：自然言語で記述されたコメントを基に、対応するコードを生成する。
  • 多言語対応：Python、JavaScript、TypeScript、Rubyなど、複数のプログラミング言語に対応する。
  • 主要なIDEとの統合：Visual Studio Code、Visual Studio、Neovim、JetBrains製品など、主要な統合開発環境と連携可能である。
  • テストコードの生成：既存のコードに対するテストコードを自動的に生成し、テストの効率化を支援する。
  • コードのリファクタリング提案：既存のコードに対して、より効率的な書き方や改善点を提案する。
  • プルリクエストの概要作成：プルリクエストの変更内容を分析し、その概要を自動生成する。
  • チャット機能：開発者が自然言語で質問や指示を入力すると、AIが適切なコードや情報を提供する。
  • マルチモデル対応：Anthropic、Google、OpenAIなど、複数のAIモデルを選択して利用できる。

Github Copilotを使用するための事前準備

使用のための手順

  1. Githubへのユーザー登録
  2. Github Copilotのトライアル版登録
  3. Visual Studio Codeのインストール
  4. Visual Studio Codeの環境設定

環境設定が完了するとVSCodeとGithub Copilotが統合された最強のコーディング環境が実現されます!

生成された「かわいいキャラクター」!

Github Copilotを使用したコード生成

詳細は、ハンズオン：AIを使ったコード生成 (YCAMワークショップ 2024) の資料を参照してください

実習! : 生成AI + p5.jsで「顔」を描く

  • 生成AIを使って、p5.jsで「顔」を描くプログラムを作成
  • 作成する方法は自由
    • ChatGPTで質問してコードを生成
    • p5.CodingWithAIを使ってコードを生成
    • Github Copilotを使ってコードを生成
  • 「かわいい顔」「リアルな顔」「笑顔」「悲しい顔」などいろいろな顔の生成に挑戦してみましょう!