9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

#TeachableMachine で夫婦喧嘩をイヌに食わせてみた🐶

Last updated at Posted at 2023-06-05

お悩み相談

Q. 26歳女性。結婚して4か月、夫婦喧嘩が止まりません。

お互い仕事が忙しく余裕がないからか、ちょっとしたことで衝突してしまいます。仲直りしようと謝っても、
ごめんね:rage:
それはごめんと思っている人の言い方じゃない!!!:japanese_ogre:
という言い争いになってしまい、うまく仲直りできません。まだ結婚して半年もたっていないのに…先が思いやられます。どうしたらよいでしょうか。
(埼玉・C子)

A. 客観的な視点からご自身の言動を振り返ってみましょう🐶

夫婦喧嘩は犬も食わないといえど、問題解決には客観的な視点も重要です。お二人は気づかないうちに言い方がきつくなってしまっているのかもしれません。夫婦円満のためにも、一度ご自身の謝り方を客観的な視点でチェックし、仲直りに役立ててみてはいかがでしょうか。

という世の夫婦のお悩みを解決するために作られたWebアプリはこちら:information_desk_person_tone1:

夫婦喧嘩食べる犬🐶

夫婦喧嘩をエサにするイッヌが、あなたの「ごめんね」の出来を判定します!
Webアプリはこちらからお使いいただけます:point_down:

image.png

つかいかた

  • エサをあたえる」ボタンを押す
  • ブラウザでマイクを許可
  • 数秒待って「ごめんね」と言う
  • イッヌ🐶があなたの「ごめんね」の出来をチェック!

PCのブラウザで使用することを推奨します。私はChromeを利用しています。
Androidスマホではうまく動作しない場合があります。iPhoneは非対応です。

つくりかた

つかった技術

  • HTML
  • JavaScript
    • ml5.js・・・Webアプリケーション上で機械学習を手軽に行うことができる JSライブラリ
    • Teachable Machine・・・機械学習の独自モデルが作成できるWebアプリケーション
    • WebSpeechAPI・・・音声の認識・発話を行うことができるWeb標準の技術

①Teachable Machineでモデル作り

Teachable Machineの音声プロジェクトを使用しました。
image.png

作成した音声モデルはこちらです:information_desk_person_tone1:
https://teachablemachine.withgoogle.com/models/nwI4LEujG/

  • 音声モデル作成手順
  1. バックグラウンドノイズ:部屋の環境音を録音します
  2. 謝ってる:心を込めた「ごめんね」をひたすら録音し続けます
  3. 謝ってない:乱暴な「ごめんね」をひたすら録音し続けます

「2. 謝ってる」と「3. 謝ってない」を録音するときは、「1秒間録音する」を選びましょう。1秒以内の「ごめんね」をできるだけ多く録音することが、判定の精度を上げるポイントです!
image.png

②コーディング

すべてのファイルを同じ階層に置く前提です。
image.png

HTMLコード
index.html
<!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <title>夫婦喧嘩食べる犬🐶</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>

</head>
<body>
<div class="container text-center text-primary">

  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>夫婦喧嘩食べる犬🐶</h1></div>
  </div>

  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <h3 id="result">「ごめんね」って言ってみてワン!</h3>
    </div>
  </div>
  
  <img height="auto" width="200" src="./innu.png">
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button class="btn btn-primary" onclick="start()">確認</button>
      <p>「確認」を押す⇒マイクを許可⇒数秒待って「ごめんね」って言おう</p>
    </div>
  </div>
  
</div>
<script src='https://unpkg.com/ml5@latest/dist/ml5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>

</body>
</html>
JavaScriptコード
script.js
// 作成したモデルのURL
const soundModelURL = 'https://teachablemachine.withgoogle.com/models/nwI4LEujG/';
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();

// 音声認識されたらエラーがerrに、結果配列がresultsに入れられて以下の関数が実行されます
async function recognized(err, results) {
    if (results[0] && results[0].label == '謝ってない') {
        console.log('それ、ちゃんと謝ってる?');
        document.getElementById("result").textContent = '\もうひといき!/';
       await readAloud(results[0].label);
    } else if (results[0] && results[0].label == '謝ってる') {
        console.log('OK!');
        document.getElementById("result").textContent = '\完璧!/';
        await readAloud(results[0].label);
    } else {
        document.getElementById("result").textContent = '';
    }
}

// メインの関数(ここでは定義しているだけでボタンクリックされたら実行)
async function start() {

    // オプション:確度がどれぐらい以上なら認識したとみなすか
    const options = { probabilityThreshold: 0.7 };

    // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
    const classifier = ml5.soundClassifier(soundModelURL + 'model.json', options, () => {
        // 読み込みが完了次第ここが実行されます
        console.log('モデルの読み込みが完了しました');

        // 認識を開始します
        // ここで認識開始を1度宣言すると、音声が検出され次第何度でも関数recognizedが実行されます
        classifier.classify(recognized);
    });
}

function readAloud(result) {
    // ブラウザにWeb Speech API Speech Synthesis機能があるか判定
    if ('speechSynthesis' in window) {
        // 発言を設定
        const uttr = new SpeechSynthesisUtterance();
        if (result == '謝ってない') {
            uttr.text = '深呼吸して落ち着くワン!'
        } else if (result == '謝ってる') {
            uttr.text = '反省してるワン!ゆるしてあげてワン。'
        }
        // 言語を設定
        uttr.lang = "ja-JP"
        // 速度を設定
        uttr.rate = 1
        // 高さを設定
        uttr.pitch = 1
        // 音量を設定
        uttr.volume = 1
        // 発言を再生
        window.speechSynthesis.speak(uttr)
    } else {
        alert('大変申し訳ありません。このブラウザは音声合成に対応していません。')
    }
}
イッヌ(innu.png)

innu.png

実践!

実際の夫婦喧嘩で使ってみました!
果たして、仲直りできるのか!?!?!?

無事夫と仲直りできました:clap:
みなさんもぜひ、夫婦喧嘩食べる犬🐶で平和な夫婦生活を:kissing_heart:

9
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?