Zod を使って OpenAI の構造化された出力を扱うZod を使って OpenAI の構造化された出力を扱う 2024.12.07 OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。
ChatGPTへの質問とコピペだけでThree.jsによるアニメーションプログラミングをしてみる - TC3株式会社｜GIG INNOVATED.
はじめに JavaScriptで3DといえばThree.jsが有名だと思いますが、今日はChatGPTへ質問して得た回答でThree.jsを使ったアニメーションプログラミングをしてみたいと思います。 まずは全部お任せでアニメーション 質問 HTMLとJSでThree.jsを使って3D画像を動かすコードを教えてください。 すると手順及びコードで分かりやすく教えてくれました。 回答 Three.jsを使って3D画像を動かす基本的なコードを以下に示します。このコードは、HTMLとJavaScriptで構成されており、Three.jsのCDNリンクを含めています。 まず、HTMLファイルを作成してください。以下のコードをindex.htmlという名前で保存してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <
作成した3Dモデルの中にthree.jsで影をつける方法
blenderで作成した3DモデルをGLTF形式で書き出し、3Dモデルの中にthree.jsで影をつけます。 影がついていないver 3Dモデルを読み込んでるのでもちろん立体感はありますが、影がないのでのっぺりした感じに見えます。 影がついているver 影がついているのでより立体感を感じます。 影をつける方法 影をつけるのに必要な部分だけ記述します。 Scene等の設定は省きます function initRenderer(){ renderer = new THREE.WebGLRenderer({ antialias: true, // 表面を滑らかにする alpha: true, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHe
自社データ × ChatGPTで社内AIを構築するRAG ツール｜Doox β版をリリースしました - Qiita
TLDR 社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を構築するためのサービスを開発しました。 β 版として無料で公開しているので是非使ってみてください。 サーバーレスな構成で Next.js を動かしている。技術のキャッチアップは大変だ。 背景 仕事をしていると社内の規定 / 製品情報 / 過去の履歴 .. などに関する問い合わせは日常的に発生するものだし、その工数は結構ある。通常は Wiki を作ってナレッジを共有するが、結局「近い人や担当に聞く」という行為はなかなか減らない。 色々な企業が、社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を独自に開発しているようで、技術ブログとかに書いている方も多い。 社内向け RAG の構築を SaaS プロダクトで提供したら各社の社内の問い合わせ工数と独自に RAG を構築するコストを下げられて嬉しいん
Flashエミュレーター誕生のきっかけは別に「フラッシュ愛」じゃなかった 「swf2js」開発者の本音と数奇な運命【フォーカス】
株式会社ソニックムーブ エンジニアグループ ソリューションユニット マネージャー 家永 稔之 2011年にソニックムーブに入社。個人ではJavaScriptとTypeScriptを用いて、「swf2js」や「Next2D」の開発を手がける。業務のリモート化をきっかけに地元の消防団に所属し、防災活動として月に数回、消防車両に乗って地域の巡回を行う。 X GitHub Animation Tool かつてインタラクティブなWebコンテンツを支えた「Adobe Flash」。「Adobe Flash Player」は2020年12月末でサポートを終了し、ほとんどのコンテンツはすでに姿を消しました。そんなFlashコンテンツ（SWF）を最新のHTML環境で再生可能にする、オープンソースのJavaScriptライブラリが「swf2js」です。ソフトウェアエンジニアの家永稔之さんが開発し、2015年に
【2024年最新】モダンフロント学習教材まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescript
git diff＋ChatGPTでPRの説明文作成しよう！ - Qiita
はじめに 組織で開発を行っている皆さんは普段からPull Request（PR）を作っていますよね？(決めつけ) masterブランチに直接pushしている方も中にはいるかもしれませんが、会社やチームで開発を行っていると、PRを作成する頻度は高いのではないかと思います。 そしてPRを作成する際には、その説明文を書く必要があります。 コードだけを読んで修正意図が伝わればいいですが、そうはいってもすべての背景をコードベースで伝えるのには限度があります。 しかし、だからといって修正の背景や詳細を、開発者自身が客観的な文章で伝えるのは簡単なことではありません。 そこで、この記事ではgit diffとChatGPTを組み合わせて、自動的にPRの説明文を生成する方法をご紹介します。 How to make PR？ 繰り返しになりますが使うのはgit diffコマンドとChatGPTだけなんです!(お昼
日本語の単語を適切な位置で区切って読みやすく改行してくれる軽量でオープンソースなライブラリ「BudouX」の機能＆採用例＆デモはこんな感じ、Chrome 119に実装予定で簡単に利用できる見込み
日本語のページをブラウザで見ているとおかしな位置で改行されることが多いのですが、単語と単語の間にスペースを入れる英語などと異なり、日本語では分かち書きがされていないのが原因。単語の途中で文章が折り返されてしまう原因になっています。BudouXは機械学習モデルを利用して容量を抑えつつ、サードパーティーのAPIやライブラリに依存せずに分かち書きを行ってくれるオープンソースライブラリなので、読みやすい改行が実現できます。 Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器 https://developers-jp.googleblog.com/2023/09/budoux-adobe.html BudouXの使用イメージは下図の通り。従来は画面幅によっては「最先端」や「テクノロジー」などの単語の途中で改行が行われてしまう事がありましたが、
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
駅メモ！開発チームにおける Vue.js のマイグレーションプロセス - Mobile Factory Tech Blog
こんにちは、駅メモ！でフロントエンドを良い感じにしたかったチームの id:yunagi_n です。 今回は、駅メモ！にて使用している Vue.js を 2 系から 3 系へあげて行くに当たって、採用した手法とマイグレーションプロセスについて紹介します。 今回、マイグレーションするに当たって、以下の要件がありました： 機能開発を止めてはいけない 駅メモ！では 6 月と 10 月に周年リリースがあり、それの開発を止めるわけにはいきませんでした もちろん、その間にあったイベントなどについても、開発は継続し続けています 多くのメンバーは割けない 基本はわたしが中心に、追加で 1 人〜2 人に手伝ってもらうことはありました また、参考のため、駅メモ！のフロントエンドの規模感を紹介しておくと： Vue コンポーネント数は 1500 コンポーネント fd --type file --extension
Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
近傍探索ライブラリFaissを使ってみた - Re:ゼロから始めるML生活
最近、レコメンデーション系のことをやっている関係で色々調べてます。 以前はNGTを使って近傍探索を試していました。 www.nogawanogawa.com Embeddingとかを使った検索やレコメンデーションには近傍探索ライブラリは非常に重要です。 ちょっと調べてみると、メルカリさんがFaissというライブラリを使っているようでした。 tech.mercari.com ちょっと興味が出て使ってみたので、、今回はそのメモです。 近傍探索問題 Faiss インストール 使ってみる 感想 近傍探索問題 近傍探索問題は、データ量に応じて計算量が急激に増大する古典的な問題で、以下のような用途で使われています。 最近傍探索は、以下のような様々な分野で使われている。 ・パターン認識 - 特に光学文字認識 ・統計分類- K近傍法参照 ・コンピュータビジョン ・データベース - 例えば、内容に基づく画像
TerraformでLambda[Python]のデプロイするときのプラクティス | DevelopersIO
※先に断っておきますがベストプラクティスではないです。 訳あって最近は、Lambda FunctionとLayerをTerraformでデプロイしています。 CloudFormationと比べてると自動ロールバック機能はないのですが、デプロイが早く気に入っています。 ただ、いくつかハマりポイントがあったので、今回はそこらへんの知見を紹介したいともいます。 せっかちな人へ GitHubにソースコードあげています。 概要 ファイル構成 $ tree -L 2 . ├── README.md ├── main.tf ├── src │ └── get_unixtime.py ├── requirements.txt ├── build-lambda.sh └── build main.tf Terraformのtfファイル src/get_unixtime.py Lambda Function用
![TerraformでLambda[Python]のデプロイするときのプラクティス | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a77b081e14c8d61a2e80498092f8ffb9b60da03/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Fterraform-eyecatch.png)
TypeScript 版 LangChain で自前の情報を元に対話できるようにする
基本こちらのものを TS で書き直した感じです。 ▼ langchain.js のドキュメント ▼ サンプルコードがあるレポジトリ Vectorstore の準備 まず事前準備として Vectorstore なる AI のためのデータベースを用意します。 いくつかオプションがあるのですが、私は違いがよく分かっていないのでこちらの pinecone というものを使ってみました。 正直私は具体的に Vector とはなんなのか分かっておらず雰囲気で使っています。pinecone が解説記事を書いているのでこちらを読んでみると良いかもしれません。 こちらに SignUp した後、Indexes を選択し、 Create Your First Index！ をクリックします。 Index Name に適当な名前をつけ、Dimensions には 1536 と入力します。なんか1536次元のベクトル
「フロントエンド開発者」の終焉 | POSTD
元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
Ayo.js について - from scratch
Ayo.js とは 「Node.js の fork です。」と言ってもまだできたばかりで正直このタイミングで記事にしてもまだ語ることはそんなに多くないです。 ただし、JavaScript界隈が騒ぎになりかけていることは確かです。日本でも発言が増えてきたので自分なりにまとめて今時点での話をしようと思います。 ちなみに読み方は好きに読んでくれ、と言われてます。 「アイ・オー」でもいいし、「エイ・ヨー」でも良いとのことです。ネーミング的には昔あった io.js fork騒動を想起させるネーミングになってます。もしも io.js についてご存じない方もいるのであれば、こちらをご参照ください。 yosuke-furukawa.hatenablog.com Ayo.js の目的 https://github.com/ayojs/ayo/blob/zkat/values/VALUES.md ここを見ると
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
Monacaを使ってクイズアプリをたった1時間で作ってみる-後編-
前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。 クイズデータを作ろう まずはクイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。更にservicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
