お役立ち情報

ChatGPTの画像認識を使って画像管理を効率化しよう

  • POSTS
はじめに 画像認識や物体検出の研究開発において、大量の動画、画像データを効率的に管理し、必要なシーンを素早く検索できる環境の構築は重要な課題となっています。従来の方法では、人間が一つ一つの動画を確認し、メタデータを付与する必要がありました。この作業は膨大な時間と労力を要し、プロジェクトの大きなボトルネックとなっていました。 例えば: 自動運転の開発には、様々な道路状況の映像データ セキュリティシステムには、異常検知のための監視映像 製造ラインの品質管理には、製品検査の画像データ これらのデータを効率的に管理し、必要なシーンを素早く取り出せる環境がなければ、開発のスピードは大きく低下してしまいます。 本記事では、最新のChatGPTを活用して、この課題を解決する具体的な方法を解説します。動画データの自動解析から、検索可能なデータベースの構築まで、実装に必要な要素を詳しく見ていきましょう。 目次 はじめに 実装手順 おすすめのツールとライブラリ 実装の際の注意点 結論 実装手順 以下がChatGPTを使った画像データベース構築のパイプラインです。 1. 動画のフレーム分割 まず、動画をフレーム画像に分割します。以下はPythonとOpenCVを使用した実装例です: import cv2 import os def extract_frames(video_path, output_dir, interval=30): """ 動画からフレームを抽出する Parameters: video_path (str): 入力動画のパス output_dir (str): 出力先ディレクトリ interval (int): フレーム抽出間隔 """ if not os.path.exists(output_dir): os.makedirs(output_dir) video = cv2.VideoCapture(video_path) frame_count = 0 while True: success, frame = video.read() if not success: break if frame_count % interval == 0: frame_path = os.

技術ドキュメント作成のChatGPT活用法6選

  • POSTS
はじめに 「ドキュメントを書く時間があったら、コードを書きたい」 多くの開発者の方に共感していただけるのではないでしょうか。 とはいえソフトウェア開発プロジェクトにおいて、技術ドキュメントの作成は避けて通れない重要なタスクです。実際、業界の調査によると、開発者は作業時間の15-20%をドキュメント作成に費やしているとされています。コードを直接記述したエンジニアが作成する必要があるドキュメントも多く、この作業負荷は決して無視できないものです。 もしこの作業時間を数時間単位で削減できたら? 本記事では、ChatGPTなどのAIを活用して、技術ドキュメント作成を効率化する具体的な方法を紹介します。適切なプロンプトと組み合わせることで、ドキュメント作成の時間を大幅に削減し、より本質的な開発作業に時間を割くことができるようになります。場合によってはエンジニア本人ではなく、アシスタントさんなどに作業を割り振ることもできるでしょう。 今回は特に効果の高い6つの活用法を厳選してご紹介します。これらの手法を組み合わせることで、プロジェクト全体で数十時間規模の工数削減も決して夢ではありません。ぜひ最後までお付き合いください。 目次 機能・関数の説明生成 手順 実際の出力例 ディレクトリ構成の記述 手順 実際の生成例 シーケンス図の自動生成 手順 生成例と実際の図 APIドキュメントの自動生成 手順 Swagger UI活用 データベース設計書の生成 手順 テーブル説明と設計図の生成 エラーハンドリングドキュメントの作成 手順 出力例 まとめ メリット 注意点 1. 機能・関数の説明生成 開発者にとって最も時間がかかる作業の一つが、個々の関数やメソッドの詳細な説明を書くことです。AIを使用することで、この作業を大幅に効率化できます。 具体的な手順: 対象のコードをChatGPTに入力します(なお機密保持の観点で、有料版のPlaygroundを使うか、API経由でのご利用を推奨します) 以下のようなプロンプトを入力: 以下のコードを関数ごとに説明してください。説明は以下の例のようなフォーマットで記述すること。 例) 関数名:fetchData スクロールを監視し、ページ下部付近でさらにデータをフェッチします {あなたのコード} 試しに筆者の開発したコードを読み込ませてみると、以下のようなレスポンスが返ってきます。このような機能一覧をわずか数秒で作成することができます。 `initializeApp` 初期化された設定に基づいてアプリを初期化し、セットアップ。データをフェッチします。 `initializeSAMPLE` アプリを初期化し、ログインユーザーのプロフィールを取得。未ログイン時は警告を表示します。 `handleScroll` スクロール位置を監視し、ページ下部付近で追加のデータをフェッチして表示を更新します。 `fetchMore` 現在の状態を確認しながら、追加のデータを非同期でサーバから取得します。 `renderTabs` タブクリックイベントを登録し、選択されたタブに応じてデータのレンダリングやクリップボードを更新します。 `renderStatistics` ユーザーの統計データを表示し、時間別に分けて表示します。 このアプローチによって、時間の大幅な節約ができるとともに、一貫性のある説明フォーマットを持つことができ、読み手にとっても利便性の高い機能一覧を作成することができます。

UIToolkitで自作プログレスバーの作成

  • POSTS
こんにちは、カシカでエンジニアをしております、村本と申します。 Unityを使った開発の中でUIToolkitでプログレスバーの自作コンポーネントを作った話をします。 作成中のアプリケーションでデータ処理状況を表示するプログレスバーを追加することになり、デザインが上がってきました。 左右が丸くなっているデザインでした。 UIToolkit標準のプログレスバーのデザインを変更するには限界があるため、自作することにしました。 仕様 0~100%で数値を指定します。数値は半円を含まない位置を基準とします。 0%の時は背景色のみ 100%の時は前景色のみとします。 開発 作成中のアプリケーションには既に似たデザインのスライダーがありました。背景部分で数値の範囲による状態の違いを表現する機能を持っています。 数値の部分が半円かどうかの違いはありますが、スライダーのつまみ以外は同じような構成にできるだろうと思い、これを参考にプログレスバーを実装することにしました。 この時点ではプログレスバーの幅が複数種類必要になる可能性があったため、進捗部分の幅は%で指定したいと思いました。 そこで下記画像に示すような構造にしようと実装を始めました。 ところが実装中に問題が発生しました。端の半円をborder-radiusの指定で作ろうと思ったのですが、UIToolkitでは要素の幅がborder-radiusの指定値の倍未満だと半円部分の比率が変わってしまうようです。(Unity2022.3.16f1) そこで回避するために、こういう構造にしました。 ところが、今度は別の問題が発生しました。このアプリケーションではフルHDを基本にウィンドウサイズに合わせて画面を拡大縮小する処理が入っていて、ウィンドウサイズによって要素と要素の隙間が開いて見える現象が発生してしまいました。 そこで、上記の問題を解決するために、半円部分と塗り部分をひとつのVisualElementにまとめる方法を思い付きました。paddingで左右に半円分の幅を確保するという方法です。下記画像のような構造になりました。 この方法だと重ねるレイヤー数も減り、隙間ができる問題も解消します。参考にした元のスライダーは塗り部分が真っ直ぐのデザインのためこの構造にはできなかったのですが、このプログレスバーは塗り部分の右側が半円になっているデザインなので実現できました。 実装 最終的にこのような実装になりました。 ProcessProgressBarComponent.uxml <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False"> <Style src="ProcessProgressBarComponent.uss" /> <ui:VisualElement class="process-progress-component" style="flex-grow: 1; flex-direction: row;"> <ui:VisualElement name="process_progress_bar"> <ui:VisualElement class="process-progress-bg" /> <ui:VisualElement name="process_progress_fill" class="process-progress-fill" /> </ui:VisualElement> </ui:VisualElement> </ui:UXML> ProcessProgressBarComponent.uss #process_progress_bar { margin-left: 4px; margin-top: 4px; width: 100px; height: 8px; border-radius: 4px; background-color: #707070; opacity: 1; } .

Webブラウザで動作するVRMビューワの作成

  • POSTS
こんにちは、カシカでエンジニアのインターンをしております、石飛と申します。 今回はVRMモデルを表示する簡単なwebアプリを作る方法を解説します。 VRMを表示し、カメラのコントロール、モーションの変更、表情の変更の 基本的なコントロールができるWEBアプリの作っていきます。 やりたいこと VRMとは人型アバターモデルのためのファイルフォーマットです。 実際のデータはニコニ立体などから入手することができます。 今回の例でもこのサイトに公開されているニコニ立体ちゃんを利用します。 公式のガイドに従えば、Unity、Blender、Maya等の標準的なCG開発環境でVRM形式のデータを読み込むことができます。 ですが、今回はwebブラウザでVRMデータを表示することを目的とします。 実際に作ったアプリのスクリーンショットを下に示しています。 VRMデータを読み込んで表示することはもちろん、カメラを移動して様々な方向からモデルを観察することができます。 また、VRMモデルの操作として、表情の変更やFBX形式のモーションデータの適用も可能です。 (完成版のイメージと主な機能) 主なソフトウェア 作るとはいってもJavaScript系の既存ソフトウェアを組合わせるだけで、簡単な機能はすぐに実現できます。 ここでは、今回の用途において要となるNode.jsとthree-vrmの概要を説明します。 具体的な環境構築の方法はこちらの記事を参考にしてください。 Node.js JavaScriptの実行環境としてNode.jsを利用します。 Node.jsがどういうものなのかについては、こちらの記事でわかりやすく解説されています。 端的に言えば、ローカルで完結した環境でWebアプリを開発できるようにするものです。 Node.jsではnpmというパッケージ管理ツールを使うことになります。 上の記事の受け売りですが、知っている人には「Pythonにおけるpip、Rubyにおけるgem(RubyGems)、Debianにおけるapt、MacにおけるHomebrew、Rustにおけるcargo」と考えればすぐに理解できるかと思います。 なので次に説明するthree-vrmも $ npm i @pixiv/three-vrm のようにして、npmコマンドでインストールします。 three-vrm JavaScriptで3DCGを描画するためのライブラリとしてThree.jsがよく知られています。 このThree.jsでVRMモデルを扱えるようにしたライブラリがthree-vrmであり、pixivがオープンソースで公開しています。 three-vrmのページからリンクが張られているexamplesでは、VRMの基本的な操作を扱ったデモがまとめられています。 今回はこれらデモを参考にしてアプリケーションに機能を追加します。 ビューワの実装 先述の通りにこちらの記事に従って環境構築すると、正面を向いたモデルがブラウザで確認できるかと思います。 srcフォルダ内にあるindex.tsを編集してから $ npm run build $ npm run start ビルド・実行し直すことで機能を追加できます。 編集にあたってthree-vrmのexamplesを参考にすると述べましたが、具体的には各デモに対応するhtmlファイルのscriptブロックを参照します。 カメラのコントロール Three.jsの機能を用いることで、マウスドラッグによる視点操作が容易に実装できます。 こちらはデモのbasicを参考にしましょう。OrbitControlsをインポートし、シーン設定時にcontrolを生成していることが分かります。 // camera controls const controls = new OrbitControls( camera, renderer.domElement ); controls.screenSpacePanning = true; controls.target.set( 0.0, 1.

Gaussian Splatting 簡単なガイド

  • POSTS
こんにちは、アルフォンソと申します。カシカのエンジニアです。 今日は、Gaussian Splattingを簡単に使い始める方法を説明したいと思います。 This article English version is HERE 例のクマのgaussian splatingデモも展示してます。 pic.twitter.com/eJC9IbRAkB — 株式会社カシカ (@kashikacojp) September 18, 2023 Gaussian Splatting インストール はじめに、Gaussin Splattingを使うのために、いろいろな プログラムとライブラリをインストールする必要があります。 ハードウェア要件 CUDA-ready GPU / CUDA 7.0+ 24 GB VRAM (小さいデータであれば、少ないVRAMでも可能) ソフトウェア要件 Git Conda Visual Studio 2019 (または新しいバージョン) CUDA Toolkit SDK 11.8 COLMAP ImageMagik FFMPEG CondaとVisual StudioとGitのインストールは、インストーラをダウンロードして、指示に従ってください。簡単です。 CUDA Toolkitのインストールは少し面倒かもしれません, インストールするにはこのガイドをお勧めします here. nvcc (CUDAコンパイラ)をPATHに入れるのは忘れないでください。 まだ, Colmap と ImageMagick と FFMPEGダウンロードしてインストールする必要があります。インストールの後でインストールのフォルダーをPATHに入れていください。 次のステップでは、Gaussian Splatting gitのリポジトリのクローンを作成するのために、次のコマンドを使用してください。

NeRFモデルの品質を上げる方法

  • POSTS
English version is here こんにちは、私の名前はアルフォンソです。カシカの新メンバーです。 この記事では、AI とコンピューター グラフィックスの最新技術について、最新情報をお届けします。 今日はNeRFについてお話しします。 NeRFとは ? NeRF は、Neural Radiance Fields for View Synthesis の頭字語です。これは、カリフォルニア大学バークレー校で開発された 新しい AI ベースのレンダリング手法です。 この新しい手法は、カメラの姿勢がわかっている一連の画像を入力として使用するディープ ニューラル ネットワークに基づいています。 画像とカメラのポーズのセットは、3D 座標 (x、y、z) とカメラの視線方向 (thetha、phi) の 5D 座標入力セットとして表示されます。 ネットワークの出力は、放射輝度と場所に依存するボリューム密度になります。これは、ボリューム レンダリングをトレースしたものです。 簡単に言えば、NeRF は、入力写真の表示パースペクティブに依存するボリューム/輝度レンダリングを生成する AI ツールのように想像できます。 多くの人がさまざまな角度から物体を見つめているようなイメージで、NeRF は各人の「神経情報(neural information)」を使用して物体自体を作成します Ben Mildenhall, et. al. NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis 2020 NeRFの入力 - 写真撮影 写真はスマホやデジカメで撮影します。解像度が高いほど良いです。 オブジェクトの写真が さまざまな角度と視点 から撮影されていることが非常に重要です。 正面の写真だけを撮ると、NeRF はオブジェクトのボリュームをレンダリングするのに十分な情報を持ちません。 (正面のみを撮影したため、カメラがなくモデルの背面がノイジーです。) また、写真の数 も重要です。大量の画像を撮る必要はありません。 そのため、10 ~ 30 枚の写真をお勧めしますが、これは対象物によって変わる可能性があり、対象物をカバーするのに十分な写真です。 撮影枚数が多すぎると、カメラ位置の推定が遅くなり、難しくなり、視点の悪いカメラが生成される可能性があります。

疲れた心に沁みる…絶品寿司で癒された話

  • POSTS
こんにちは! 株式会社カシカ、加藤です。 緊急事態宣言も明け、弊社でも徐々にオフィスへ出社する機会が出てきました。 感染者数が目に見えて減るとやはり少し安心します。とはいえ、まだまだ油断せず収束までは感染予防に努めないといけませんね。 さて、テレワークもあっという間に1年半が経過しましたが、この1年半でメリデメ双方を実感しています。 通勤時間が無くなり満員電車に揺られる疲れが無くなった一方で、おこもり続きでメンタル的には結構疲れが出てきたように感じます。 新バージョンのリリースもして、ひと段落ついたので平日にちょっと羽を伸ばして千葉まで行ってリフレッシュしたので今回のブログではいつもと趣向を変えて(?)その時の事を綴ります。 目次 自粛生活の長期化、息抜きも大事! 木更津のお寿司、圧倒的美味さ…!? もりもり食べたお寿司、肝心のお会計は… 意外と近い千葉、癒されました 自粛生活の長期化、息抜きも大事! 自粛生活も1年半、ぶっちゃけ疲れてきましたね! この夏の感染者数や医療の逼迫状況を見ていると自粛の必然性は実感しますが、ストレスは溜まるもの… 宣言も明けた平日のある日、お休みを取ってアクアラインで千葉の木更津にドライブに行きました。 アクアラインってほんと凄い。高速乗って30分であっという間に千葉県入りです。 この日は朝6時過ぎに息子(0歳)に叩き起こされ、10時半過ぎにアクアラインに到着した時点で結構腹ペコ。 そこでトイレ休憩しつつ木更津エリアで何か美味しい物、折角だからお寿司を食べに行こう!とGoogle先生で調べていくことにしました。 今回伺ったのはこちらの回転寿司やまとさん 千葉県内を中心に展開するローカルの回転寿司屋さんです。 この写真だと分かりにくいですが、木更津の海の近くでこの日は目の前には大きな漁船が停まっていました。 11時半頃に入店すると既に客席は6割程度埋まっていました。 回転寿司、と書きましたがレーンはあるもののお寿司は回っておらず座席のタッチパネルでオーダーする形式で注文しやすいです。 木更津のお寿司、圧倒的美味さ…! 早速注文! 私は最初に地魚3種というのをオーダー。 この日はスズキ、ヒラマサ、真鯛でした(多分…) どれもネタが大きい!これ是非ARで見てほしい…自慢したいから… ぐるっと撮影モードで撮影してるので大変リアルで飯テロには最適です さて、肝心のお味は最高でした…。 見るからに新鮮なネタ達は、一口噛むと旨味が溢れてあっさりだけど濃厚な旨味が堪能できます。 美味しすぎて口にした悶絶しました。 これは夫が頼んだおすすめ5種。 マグロが赤身と大トロが入ってて、どれも新鮮で旨味が濃厚だと興奮していました。 これも夫が頼んだ炙り5種。 どれも美味しいけどエビとサーモンの炙りが特に美味いと煉獄さん状態でバックバク食べていました。 私は5貫は食べきれないので炙り3種を頼んで同じエビとサーモンの炙りも食べましたが確かに美味しい。 炙り加減が程よく、香ばしい香りと共に頂く新鮮なネタは最高でした。 その他、サーモン三貫やなめろうの軍艦なども注文。 なめろうは房総半島の郷土料理なだけあって絶対美味しいだろうと思っていましたが、想像以上でした… 鯵のたたきは風味が非常に強く、それに合わせる味噌と薬味が絶妙のバランス。 濃厚ななめろうの後に薬味の香りがふわっと口の中を漂って今まで私の食べてきたなめろうって何だったのか状態に… これ、ものすごーーーーーくお酒が欲しくなる味でした(今回は車なので残念ながらナシ) 肝心のカタチは食欲に負けて取り忘れました…(痛恨のミス) もりもり食べたお寿司、肝心のお会計は… 夫はこれ以外にもどんどん追加してなんと合計20貫完食。 何度もお寿司は食べに行っていますが、ここまで食べてる夫初めて見た気がします。 かくいう私も14貫ほど完食。普段は10貫食べれたら相当頑張ったほうなので、かなり食べました! お腹に余裕があったら多分もっと食べれました…フィジカルが追いつかないお年頃です… お腹いっぱい、心ゆくまで担当して二人でお会計は5,000円弱。思った以上にお手頃! さっきの豪華な5貫盛りでも880円とリーズナブルで、クオリティから考えたら破格だと思います。

iPhone1つで裏側まで撮影。新しい撮影モードを開発中

  • POSTS
こんにちは! 株式会社カシカ、加藤です。 先日、iPhone13をはじめとしたAppleの新製品が発売されましたね! 事前情報で、今回は新型のiPhone13の発表がある…?と期待されていたので当社でも発表の情報に張り付いていました。 iPhone13は既にリリースされているスキャンアプリが対応できないものもあるようで、弊社でも今後確認と検証を実施予定です。 更新が発生しましたら順次お知らせしますね。 さて、Appleの発表つながりで以前にこんな記事をUPしたのを覚えてますでしょうか。 WWDC21で発表されたObject Captureの機能を試してわかったことやハマりポイントをまとめました 弊社の代表、奥がObject Captureの機能を試したレポート記事です。 お陰様で沢山の方に記事を見て頂きました! 実は、当時のブログの締めでこんなことを書いていました。 かなり便利なAPIであることが分かったので、今後カタチスペースではObject Captureの機能に対応していきたいと考えています。 そう、カタチスペースではここ数か月、Object Captureの機能への対応を進めてきました! 今回は、バージョンアップを控えてのフライングとして、新機能について情報解禁してしまいます! 目次 そもそもObject Captureって? カタチスペースではどんな風に使えるの? 今までの撮影モードとの違いは? 新機能はいつリリースされるの? そもそもObject Captureって? Object Captureは次期macOS monterey(モントレー)の新APIです。 6月に開催された、Appleの開発者向けカンファレンスWWDCで、Object Captureについて紹介がありました。 WWDCの紹介では、iPhoneで写真を撮って、macに入れると、物体の3Dデータが 数分で作成されるとのことでした。 参考:WWDCの発表動画 この新機能、macOSの機能になるので当然iPhoneだけでは使うことはできません。 カタチスペースではmacOSを持っていないiPhoenユーザーでもObject Captureを使えるようにします! カタチスペースではどんな風に使えるの? 今回、カタチスペースではアプリの撮影モードに、新たな撮影モードを搭載しました! その名もぐるっと撮影モード(まんまですね) 名前の通り、ぐるっと回って複数枚撮影することで立体を生成することができます。 今までの撮影モードとの違いは? 複数枚撮影、というとカタチスペースには大型撮影モードがありますね。 勿論、大型モードでも複数枚撮影は可能です。 ただ、大型モードはiPhoneに搭載されているLiDARを利用して撮影する為、iPhone12Pro/Pro Max/iPadProのみ利用可能だったので、使える方に限りがありました。 新しい複数枚モードでは、上記以外の機種にも対応!(※一部、古い機種では利用できない場合があります) iPhoneで撮影するだけで360度回せるカタチを作ることができるようになります ここで、現在開発中の複数枚モードで撮影したカタチをお見せしましょう! いかがでしょう、後ろまでしっかりと撮れていますね 大型モードの複数枚撮影は、空間全体や大きな物体を撮るのに適していましたが 複数枚モードは小さな物も大丈夫! `並べてみてもそっくり(右がAR)` 今回は自宅にあるぬいぐるみを撮ってみましたが、大きさや質感までよく撮れました。 というか、油断してるとどっちが本物か見間違えることがあるレベルです これは以前のブログでご紹介した鰻重ですが、実はこれも開発中のぐるっと撮影モードで撮影したカタチになります。