はてなブックマーク

はじめに この記事は、提供が開始されたばかりの「ChatGPT API」を、早速 Node.js で試してみたという話です。 ChatGPT API の提供が始まった話は、「Introducing ChatGPT and Whisper APIs」という公式の記事を、今朝方見かけて知りました。 API の利用料金 Pricing のページ を見ると、ChatGPT API(gpt-3.5-turbo)の料金は、「0ドル.002 / 1K tokens」となっているようです。 公式の技術情報について 今回は Node.js を使って進めたのですが、その際に参照した公式の情報についても書いてみます。 Node.js用のサンプルプログラム まず、OpenAI公式の API Reference で、Node.js用のサンプルを見る方法を掲載します。 手順 OpenAI公式の API Referenc

はじめに ChatGPT Plus に課金して、Node.js・JavaScript のプログラム関連で使ってみた話です。課金して応答速度が変わったりするかな、とか、そのあたりが気になったのもありつつ。 課金後は、以下のツイートにあるように PLUS という表示が画面上に。 以前書いた記事 ちなみに、ChatGPT に関する話は、Qiita で以下のような内容のものを書いたことがあります(1つ目の記事は、リリースされた翌日に書いてたり)。 AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々 - Qiita 続・OpenAI の ChatGPT のネタ:JavaScript の特定の技術仕様を教えてもらう - Qiita OpenAI の ChatGPT の API を公式ライブラリの

この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。 ●くろまるml5.js で物体検出(COCO-SSD を利用) - OpenProcessing https://openprocessing.org/sketch/1795350 実装した内容の話 今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。 実装の際に参照した情報 実装時には、以下の ml5.js公式のドキュメントを見て実装しました。 ●くろまるObjectDetector https://learn.ml5js.org/#/reference/object-detector ml5.js によ

以下のツイートで掲載していたように、以前、p5.js Web Editor で opencv.js を利用する、ということをやったのですが、その時に行った内容の記事化です(大晦日ハッカソン2022 絡みで、この内容を活用いただけそうだったため、記事化し忘れていたのを書いて公開)。 前に試した時からライブラリのバージョンがあがっていました。そのため、今回は以下の最新版にしてから動作を確認しています。 p5.js 1.5.0 opencv.js 4.7.0 ソースコードの内容など p5.js Web Editor で opencv.js を使うために過去に試行錯誤して、sketch.js のみに手を加えるやり方で動作をさせることができていました。 その時に作ったプログラムを、以下に掲載します。 ちなみに、index.html と style.css は、p5.js Web Editor が生成

はじめに こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 24日目の記事です。 今月のアドベントカレンダー用記事で、以下の 3記事で扱った OpenAI の ChatGPT の話です。 【KDDI Engineer&Designer】AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々 - Qiita 【完走賞ゲット-4】続・OpenAI の ChatGPT のネタ:JavaScript の特定の技術仕様を教えてもらう - Qiita 【enebular 2022】ChatGPT用ノード「node-red-contrib-simple-chatgpt」を enebular・Node-REDで試したり API を Pytho

はじめに この記事は、Babylon.js Advent Calendar 2022 の 19日目の記事です。 (自分が今月に入ってから、アドベントカレンダー用に書いた記事としては、33記事目となる記事だったりします) この記事では、SVGフィルターを用いた溶けるような見た目のエフェクト(Gooey Effect)を扱います。 Gooey Effect とは? Gooey Effect とは、以下のページなどでも紹介されている、溶けるような見た目のエフェクトです。「Gooey」という単語の意味は、「ねばねばした、べたべたした、くっつく」というもののようです。 ●くろまるThe Gooey Effect | CSS-Tricks - CSS-Tricks https://css-tricks.com/gooey-effect/ ちなみに、上記のものが動いてる様子をアニメーションにしたものはこちらです

この記事の内容は、オフラインでリアルタイム音声認識ができ、日本語にも対応している以下の「VOSK」を試してみた話です。 ●くろまるVOSK Offline Speech Recognition API https://alphacephei.com/vosk/ そして今回の記事で、VOSK を扱う開発言語・環境は「JavaScript(Node.js)」です(自分がよく使っているから、という選定理由です)。 なお、対応している他の開発言語などは、公式ページの「Installation」を見ると確認でき、例えばスマホ向け(Android・iOS)や Python・Java・C# などもあるようです。 VOSK を「JavaScript(Node.js)」で扱う それでは、タイトルや冒頭にも書いた JavaScript(Node.js)で VOSK を扱う話へと進んでいきます。 公式ドキュメントの情報

この記事は JavaScript を用いた QRコードのデコードに関する内容です。 Qiita の記事でも、いくつかこの話題に関する記事がありますが、「シンプルな最低限の実装となるとどうなるか」という話を調べて試してみたくなり、今回の内容を試しました。 ライブラリ(jsQR)を試す Web上の記事を検索してみていると、JavaScript用のライブラリはいくつかあるようですが、よく見かけたものの 1つに jsQR というものがありました。 cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within. https://github.com/cozmo/jsQR

#Scratch 3.0(公式)などで独自拡張機能を使わない外部との通信【概要編】(ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可)JavaScriptNode.jswebsocketScratchtoio デフォルトでは外部と自由に通信をする機能がない 「公式版の Scratch( https://scratch.mit.edu/ )」 や、 「toio Do( https://toio.github.io/toio-visual-programming/beta/?category=do )」 を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。 今回の仕組みに関係してくる主なキーワードは、以下のとおりです。

以前、話題になっていた以下の情報取得の話について、自分が仕様を理解するためや、後で見返したくなりそうな情報をまとめてメモしておく意味で記事を書きます。 一番伸びてるのはこれかしら。仕様の継続性や運用状況のお知らせを気象庁はお約束していないという意味で、APIではないと申し上げざるを得ないのですが、一方で政府標準利用規約に準拠してご利用いただけます。 https://t.co/QLuhI4DNDv — TOYODA Eizi (@e_toyoda) February 24, 2021 記事に書いた内容 この記事で書いた内容は、主に以下です。 天気予報の取得方法 URL 地域の指定 取得できる JSON の構造 取得した情報の処理 一部のみを取り出してみる 気象庁が提供している情報を取得する 天気予報の情報を取得 いろいろなサイト・SNS上の投稿に情報がありますが、以下のページを参照して進めて

JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。 今回の記事では、調べてよく出てくるライブラリの中の1つである「anime.js」を使い、「p5.js」で Tweenアニメーションを試してみた、という話です。 他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例 anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。 GSAP ●くろまるGSAP Basic - OpenProcessing https://openprocessing.org/sketch/1227453 こちらは GSAP というライブラリとの組み合わせです。 p5.js と組み合わせて使う場合の書き方は、以下の

Cloudflare の ngrok的なサービスがあるらしい ⇒ $ cloudflared tunnel --url localhost:8080 といった使い方cloudflarengrokArgoTunnel 概要 タイトルの通りです。 ngrok とかが有名どころの、ローカルに立てたサーバをインターネット側からアクセスできるようにするやつです(Bot開発のプロトタイプを作る時とか、ローカルでテスト的に作ったサーバにインターネット側から HTTP リクエストを送りたい、とかそういう時に使う感じの)。 類似サービスもいろいろありますが、今回のものは自分は初めて見かけたように思います。 導入や使い方 cloudflared の導入方法 Mac で Homebrew を使ってるなら、以下のコマンドで簡単に導入できます。 その他の各OS での導入は、以下を見ると良さそうです。 ●くろまるInstal

この記事は、リアルタイムな通信に利用可能な PubNub を試してみた話の記事です。 また、ちょうど今日の枠が空いている JavaScript のアドベントカレンダーがあったので、急遽、そちらへの登録も行ってみました。 無料プランもあるサービスで、記事執筆時点(2020年12月19日現在)では、以下の範囲は無料で利用できるようです。 This plan is free up to 1 million transactions or 200 monthly active users. また、 公式のドキュメントの SDK に関するページ を見ると、以下の複数の言語・環境で利用できるようです。 上記の画像の下には、「Client SDKs」・「IoT SDKs」・「Server SDKs」といった項目ごとに対応言語等が書かれていました。個人的に気になったのはこのあたりです。 JavaScrip

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この記事は、以下のツイートの動画にあるようなニコニコ動画風のコメント表示を、HTML+JavaScript で実装した際の話です。 テキストを動的に生成して、画面内をアニメーションで動かす処理を書いてた件、さらに一歩先へ。 OBSとの組み合わせ!#ゆるメカトロ #Noodlもくもく会 #ビジュアルプログラミング交流会 https://t.co/rngaNDFNWj pic.twitter.com/GuZqc1vMO8 — you (@youtoy) August 29, 2020 こちらの動画の内容を実現しているものは、ボタン

プログラムの具体的な内容は、以下のとおりです。 プログラム中に 【 】 で囲まれた部分が複数ありますが、ご自身の環境に合わせて書きかえをしてください。 書きかえが必要な部分のリスト obs-websocket のポート番号 obs-websocket のパスワード(※(注記) 認証を有効にした場合に利用する) shiftr の ID shiftr の PASS MQTTクライアントのクライアントID MQTT のトピック MQTT でやりとりする文字列(※(注記) 今回は 3つのシーンを用意したため、3種類) const OBSWebSocket = require('obs-websocket-js'); const mqtt = require('mqtt'); const obs = new OBSWebSocket(); obs.connect({ // obs-websocket に関わる設定

はじめに この記事は、Web Bluetooth API を使ってロボットトイ「toio」を制御した際の過程・プログラムをメモしたものです。 具体的には以下の 4種類の処理・制御を試しました。 通知の ON/OFF(モーションセンサーの値を受け取る) デバイスの切断・再接続 値の書き込み(ランプの点灯の制御) 値の読み出し(読み取りセンサーの情報を受け取る) 制御に利用する情報は、以下の公開情報から得ています。 ●くろまる通信概要 · toioTMコア キューブ 技術仕様 https://toio.github.io/toio-spec/docs/ble_communication_overview.html 以前試した内容 Web Bluetooth API による toio の制御は、以前も利用したことがありました。 その時に行った内容は、2台の toio に同時に接続してモーターの制御を行った

イントロ こちらは、WebRTC Advent Calendar 2014の21日目のエントリーです。 実現すること PC に USB で有線接続された Android端末を用い、その Android端末のカメラ映像を PC のブラウザ上に表示させる、というものを実現します。PC に USB接続された Android端末を、Webカメラ的に使うイメージです。 このようなことをやろうとした経緯は「以前の投稿(Android端末をプレゼン用途でWebカメラ的に使おうとした話【設計編】)」をご覧ください。 実装や設定の概要 上記の内容を実現する方法は、おおまかにはこのようになります。 ※(注記) PC でも Android端末上でも、Chrome を利用 概要 getUserMedia を使い、カメラ映像をブラウザ上に表示するページを実装@ローカルPC。 Android端末の USBデバッグを有効にし、

イントロ こちらは、HTML5vent Calendar 2014の11日目のエントリーです。 まずは、タイトルに書いてる流れになった経緯を、軽く書いておきます。 経緯 エンタメな勉強会のネタの1つで、Javascript+超音波通信やりたいなぁ。 ライブラリとかあるけど(※(注記) 後述)、まずは自前でやってみよう! 可聴域以外の周波数の音って、入出力がデバイス(スピーカー・マイクとか)の性能に依存しそう・・・。 出力側の確認が耳でできないし(自宅にアナライザ的なものはないし)、デバッグ面倒かも・・・。 可聴域だと、出力が楽器とか自分の声とか使えるし、デバッグもしやすい!? 子ども向けのエンタメコンテンツとかで、声のビジュアライゼーションできたら楽しいかも♪ という思考の流れから、 まずは可聴域の音の周波数に応じて、何かをブラウザに表示するってのを作ろう!! となりました。 完成したもの (※(注記)