내 목소리로 건강한지 여부를 객관적으로 판단해 보았다.
매일 아침 모임에서 건강? 라고 물어도 ...
2020년 코로나의 영향으로 텔레워크가 주된 사람도 많을 것이다.
나의 회사도 아마 새지 않고, 텔레워크가 주가 되었습니다만, 그 때, Web에서의 아침회가 행해지는 것에.
괜찮아? 그리고 매일 듣고, 건강! 라고 대답하고 있습니다만, 역시 아침이므로, 텐션 낮고, 정말로 건강한 것인가? 라고 스스로 생각하는 것도 자주···. 그래서 자신의 건강한 목소리, 건강한 목소리에서 기계 학습을 통해 목소리에서 자신이 건강한지 판단할 수 있는 것을 만들어 보았습니다!
앱으로 판정 개시를 한다고 판단해 준다! ! (이 때는 건강하지 않다고 판단되어 버렸습니다・・・.)
드디어 Google 스프레드 시트에도 기록으로 남겨주세요!
사용한 것
· Teachable Machine
・ml5.js(SoundClassifier)
・Integromat
· Google 스프레드시트
시스템 흐름
Teachable Machine
1. 노이즈와 건강한 목소리와 건강한 목소리의 3 패턴을 등록한다(노이즈는 20개 등록, 각각의 목소리는 8개 등록이 필요)
2. 모델 교육 수행
3. 미리보기를 수행하고 문제가 있다면 모델 내보내기를 선택하고 모델 업로드를 수행합니다.
Integromat 설정
1. 웹후크와 Google 스프레드시트 연결
2. Webhook은 URL 매개 변수로 text라는 매개 변수를 허용합니다.
3. URL 매개변수로 받은 텍스트를 Google 스프레드시트에 기재
4. 실행 타이밍은 Immediately 설정
프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>声で元気か判定</title>
</head>
<body>
<h1>声で元気か判定</h1>
<!-- このapp内のみVue.jsの管理範囲です -->
<div id="app">
<p>{{ modelState }}</p>
<p>結果……{{ result }}</p>
<button v-on:click="onButtonClicked">判定開始！</button>
<video id="myvideo" width="640" height="480" autoplay></video>
</div>
<!-- ml5.js、Vue.js、axios.jsをCDNから読み込みます -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 作成したモデルのURL
const imageModelURL = 'Teachable MachineでアップロードしたモデルのURL';
let classifier;
const webhook = 'Integromatで発行したWebhookのURL';
const app = new Vue({
el: '#app',
data: {
modelState: 'モデルロード中...',
result: 'まだ始まってないよ',
},
async mounted() {
// カメラからの映像取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
// IDが"myvideo"であるDOMを取得
const video = document.getElementById('myvideo');
// videoにカメラ映像をセット
video.srcObject = stream;
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + 'model.json', () => {
// ロード完了
app.modelState = 'モデルロード完了！';
console.log('Model Loaded!');
});
},
methods: {
getResult(error, results) {
if (error) {
console.error(error);
return;
}
label = results[0].label;
console.log(label);
if (label === '元気なおはよう') {
app.result = '元気！';
} else if (label === '元気のないおはよう') {
app.result = '元気じゃない・・・';
} else {
app.result = '測定できない';
}
},
onButtonClicked: async function () {
const results = await classifier.classify(app.getResult);
let res = 'NotFound';
if (app.result === '元気！') {
res = 'fine';
} else if (app.result === '元気じゃない・・・') {
res = 'notfine';
} else {
res = 'NotFound';
}
try {
// GETリクエストでWebhookに送信
const response = await axios.get(webhook + '?text=' + res);
// データ送信が成功するとレスポンスが来る
console.log('レスポンスを受信しました：' + response.data);
console.log('POSTに成功しました！');
} catch (error) {
// ネットワークに接続できてない、サーバーが落ちてる、URLが違うなど様々なエラー
console.log('POSTに失敗しました……');
console.error(error);
}
},
},
});
</script>
</body>
</html>
마지막으로
우선, Teachable Machine을 이용하면 이렇게 간단하게 기계 학습의 모델을 이용할 수 있을까 하는 감동이 있었습니다. 자신의 목소리로 학습 데이터를 작성한 후, 판정을 받는 기구가 만들어진 것은 매우 공부가 되었습니다.
체온계로부터 체온도 취득해, 같은 Google 스프레드시트에 기록이라든가 할 수 있으면, 기록표가 되어 편리할 것 같다고 생각하고 있습니다.
Reference
이 문제에 관하여(내 목소리로 건강한지 여부를 객관적으로 판단해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/heihei15408697/items/8311c3bbb0c88db12fb1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
· Teachable Machine
・ml5.js(SoundClassifier)
・Integromat
· Google 스프레드시트
시스템 흐름
Teachable Machine
1. 노이즈와 건강한 목소리와 건강한 목소리의 3 패턴을 등록한다(노이즈는 20개 등록, 각각의 목소리는 8개 등록이 필요)
2. 모델 교육 수행
3. 미리보기를 수행하고 문제가 있다면 모델 내보내기를 선택하고 모델 업로드를 수행합니다.
Integromat 설정
1. 웹후크와 Google 스프레드시트 연결
2. Webhook은 URL 매개 변수로 text라는 매개 변수를 허용합니다.
3. URL 매개변수로 받은 텍스트를 Google 스프레드시트에 기재
4. 실행 타이밍은 Immediately 설정
프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>声で元気か判定</title>
</head>
<body>
<h1>声で元気か判定</h1>
<!-- このapp内のみVue.jsの管理範囲です -->
<div id="app">
<p>{{ modelState }}</p>
<p>結果……{{ result }}</p>
<button v-on:click="onButtonClicked">判定開始！</button>
<video id="myvideo" width="640" height="480" autoplay></video>
</div>
<!-- ml5.js、Vue.js、axios.jsをCDNから読み込みます -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 作成したモデルのURL
const imageModelURL = 'Teachable MachineでアップロードしたモデルのURL';
let classifier;
const webhook = 'Integromatで発行したWebhookのURL';
const app = new Vue({
el: '#app',
data: {
modelState: 'モデルロード中...',
result: 'まだ始まってないよ',
},
async mounted() {
// カメラからの映像取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
// IDが"myvideo"であるDOMを取得
const video = document.getElementById('myvideo');
// videoにカメラ映像をセット
video.srcObject = stream;
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + 'model.json', () => {
// ロード完了
app.modelState = 'モデルロード完了！';
console.log('Model Loaded!');
});
},
methods: {
getResult(error, results) {
if (error) {
console.error(error);
return;
}
label = results[0].label;
console.log(label);
if (label === '元気なおはよう') {
app.result = '元気！';
} else if (label === '元気のないおはよう') {
app.result = '元気じゃない・・・';
} else {
app.result = '測定できない';
}
},
onButtonClicked: async function () {
const results = await classifier.classify(app.getResult);
let res = 'NotFound';
if (app.result === '元気！') {
res = 'fine';
} else if (app.result === '元気じゃない・・・') {
res = 'notfine';
} else {
res = 'NotFound';
}
try {
// GETリクエストでWebhookに送信
const response = await axios.get(webhook + '?text=' + res);
// データ送信が成功するとレスポンスが来る
console.log('レスポンスを受信しました：' + response.data);
console.log('POSTに成功しました！');
} catch (error) {
// ネットワークに接続できてない、サーバーが落ちてる、URLが違うなど様々なエラー
console.log('POSTに失敗しました……');
console.error(error);
}
},
},
});
</script>
</body>
</html>
마지막으로
우선, Teachable Machine을 이용하면 이렇게 간단하게 기계 학습의 모델을 이용할 수 있을까 하는 감동이 있었습니다. 자신의 목소리로 학습 데이터를 작성한 후, 판정을 받는 기구가 만들어진 것은 매우 공부가 되었습니다.
체온계로부터 체온도 취득해, 같은 Google 스프레드시트에 기록이라든가 할 수 있으면, 기록표가 되어 편리할 것 같다고 생각하고 있습니다.
Reference
이 문제에 관하여(내 목소리로 건강한지 여부를 객관적으로 판단해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/heihei15408697/items/8311c3bbb0c88db12fb1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>声で元気か判定</title>
</head>
<body>
<h1>声で元気か判定</h1>
<!-- このapp内のみVue.jsの管理範囲です -->
<div id="app">
<p>{{ modelState }}</p>
<p>結果……{{ result }}</p>
<button v-on:click="onButtonClicked">判定開始！</button>
<video id="myvideo" width="640" height="480" autoplay></video>
</div>
<!-- ml5.js、Vue.js、axios.jsをCDNから読み込みます -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 作成したモデルのURL
const imageModelURL = 'Teachable MachineでアップロードしたモデルのURL';
let classifier;
const webhook = 'Integromatで発行したWebhookのURL';
const app = new Vue({
el: '#app',
data: {
modelState: 'モデルロード中...',
result: 'まだ始まってないよ',
},
async mounted() {
// カメラからの映像取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
// IDが"myvideo"であるDOMを取得
const video = document.getElementById('myvideo');
// videoにカメラ映像をセット
video.srcObject = stream;
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + 'model.json', () => {
// ロード完了
app.modelState = 'モデルロード完了！';
console.log('Model Loaded!');
});
},
methods: {
getResult(error, results) {
if (error) {
console.error(error);
return;
}
label = results[0].label;
console.log(label);
if (label === '元気なおはよう') {
app.result = '元気！';
} else if (label === '元気のないおはよう') {
app.result = '元気じゃない・・・';
} else {
app.result = '測定できない';
}
},
onButtonClicked: async function () {
const results = await classifier.classify(app.getResult);
let res = 'NotFound';
if (app.result === '元気！') {
res = 'fine';
} else if (app.result === '元気じゃない・・・') {
res = 'notfine';
} else {
res = 'NotFound';
}
try {
// GETリクエストでWebhookに送信
const response = await axios.get(webhook + '?text=' + res);
// データ送信が成功するとレスポンスが来る
console.log('レスポンスを受信しました：' + response.data);
console.log('POSTに成功しました！');
} catch (error) {
// ネットワークに接続できてない、サーバーが落ちてる、URLが違うなど様々なエラー
console.log('POSTに失敗しました……');
console.error(error);
}
},
},
});
</script>
</body>
</html>
우선, Teachable Machine을 이용하면 이렇게 간단하게 기계 학습의 모델을 이용할 수 있을까 하는 감동이 있었습니다. 자신의 목소리로 학습 데이터를 작성한 후, 판정을 받는 기구가 만들어진 것은 매우 공부가 되었습니다.
체온계로부터 체온도 취득해, 같은 Google 스프레드시트에 기록이라든가 할 수 있으면, 기록표가 되어 편리할 것 같다고 생각하고 있습니다.
Reference
이 문제에 관하여(내 목소리로 건강한지 여부를 객관적으로 판단해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/heihei15408697/items/8311c3bbb0c88db12fb1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
