tech

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 枚の写真をお勧めしますが、これは対象物によって変わる可能性があり、対象物をカバーするのに十分な写真です。 撮影枚数が多すぎると、カメラ位置の推定が遅くなり、難しくなり、視点の悪いカメラが生成される可能性があります。

新型iPad Pro登場

  • POSTS
こんにちは! 株式会社カシカ社長の奥です。 新しいiPad Proが発売されましたね。 今回の目玉はなんといっても LiDARセンサー搭載。 弊社ではカタチスペースという、写真を撮るだけで簡単に立体ARをつくれるサービスをリリースしていますが、 今回のiPad ProのLiDARセンサーでより正確なカタチが撮影しやすくなるのではないかと期待しています。 LiDARセンサーって何なの? appleのサイトより引用: https://www.apple.com/jp/ipad-pro/ LiDAR とは、Light Detection And Rangingの略称で、 車の自動運転のためのセンサーや航空機に空撮計測などでよく利用されている距離センサーです。 計測方式は、赤外線の光を発し、その光が物体に衝突してから跳ね返ってきた時間で 物体と光源との距離を計測する方式です。 下記がわかりやすい説明のサイトかと思います。 https://jp.techcrunch.com/2017/02/13/20170212wtf-is-lidar/ これまでも距離を計測するセンサーはありましたが、 光の特性を利用する一部のセンサーは晴天の屋外では利用できないものがあります。 車や航空機でも利用される方式のセンサーがタブレット端末に搭載されたというのは 3Dスキャンを利用する業界でも非常に大きな話題となっています。 LiDARセンサーでARはどう変わるのか? 早速、iPadでカタチスペースのARを試してみました。 ARをやっているとすぐにわかるのですが、iPhoneなどではARを前に 「iPhoneを動かしてください」と表示がでます。しかし新型iPadでは そのような表示は出ずに、いきなりARのオブジェクトが目の前に出てきます。 煩わしい、ARのための準備体操が要らないわけです。 これはユーザーにとってはとても便利ですね。 オクルージョンを試してみました。 すごいですね。ARオブジェクトがちょうどある位置に手を差し入れると 重なる部分だけARオブジェクトの中に指が沈む感じがみえます。 iPhoneXR以降のiPhoneは人の手や体がARオブジェクトの手前か後ろかを判定し、 ARオブジェクトに重なる場合ARオブジェクトを表示したり、隠蔽(オクルージョン)する機能があります。 カタチスペースで撮影したARオブジェクトを目の前に表示し、 手で触ろうとすると、オブジェクトの手前に手があると手が見えて、 奥に差し入れると、オブジェクトが見えるようになります。 iPhone11ではどうだったかというと、 オクルージョンされなくはないのですが、ARオブジェクトよりも手前に手がある位置なはずなのですが ARオブジェよりも奥に手があるような表示になっています。 自分のiPhoneやAndroidで試してみたい方はこちらのURLからすぐに試すことができます。 このカタチを見てみる LiDARセンサーでカタチはうまく撮れるのか? LiDARセンサーによる、ARの表示の性能が良かったので、 LiDARセンサーによるカタチの撮影の機能向上も期待しちゃいますよね。 まずはインカメラで撮影したいつものクマのぬいぐるみのAR インカメラのTrueDepthセンサーは iPhone11とほぼ変わらない感じですね。 また、ARを見るときは大きい画面だと目の前を覆う面積が広いので、没入感あります。 さて、LiDARセンサーを使った機能をAppleが公開したサンプルで試します。 動画バージョン: 結構ポリゴンが荒いですね。 ポリゴン自体はかなり高速に生成されているのでカタチの撮影でも利用できそうですが、 ちょっと三角形の大きさが荒すぎるので、このままではカタチに使うのは難しそうです。 ちなみにインカメラでカタチ撮影した時のポリゴンはこんな感じです。 こっちのほうが三角形の目が細かいですね。ちゃんとしたカタチを見るためには、 このくらいの三角形の細かさが必要になってきます。 Appleの今後に期待 じゃぁLiDARセンサーだめなんじゃ?という訳ではないです。 おそらく、Appleの意図としては、ARの表示向けの新機能なので、 ARを計測するためのセンサーではないというところでしょう。 しかし、LiDARセンサーは、従来のデュアルアウトカメラよりも 高性能な奥行情報を取得できる可能性は高く、 それは今回のオクルージョンの結果からも明らかで、 その奥行情報を利用したカタチの生成は、かなり期待していいと思います。