Posts

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

カタチスペースTwitterコンテスト開催のお知らせ(※追加情報あり)

  • POSTS
こんにちは、カシカの山本です。 カタチスペースの普及活動と開発を担当しています。 今回から私もカシカブログの更新を行っていきますので、よろしくお願いします! ※5/19 追加情報を更新しました さて、2周年を迎えたカタチスペースですが、皆さんは普段どのように利用されていますか? 私自身もそうなのですが、やはり皆さんの投稿を見ていると、普段のランチやちょっと特別なディナーなど「ごはん」のカタチが多くアップロードされているようです。 普通はスマホで「写真」として記録を残していくかと思いますが、カタチスペースなら「3D」で質感やサイズ感も実物に近い形で保存でき、目の前にARで表示することも出来ます。 カシカでは、この感動をより多くの人に体験して頂きたい、3DやARをもっと楽しんで頂きたいと考えています。 ということで、カタチスペース史上初のイベント 「カタチスペースTwitterコンテスト」 を開催します!! 今回のテーマは 「カタチゴハン」 普段のランチやちょっと特別なディナーなど、ゴハンを撮影して応募しましょう! 晩御飯で食べたモダン焼き ランチのオムライス。お好きなものを撮影して応募してください。 カタチスペースのTwitterアカウントをフォロー後、小物モード でランチやディナーを撮影後。撮影したカタチのシェアボタンから 「#カタチゴハン 」を付けてTwitterに投稿することで応募が完了します。 コンテストということで、賞品として総額1万円分のAmazonギフト券をご用意させて頂きました! 応募締切は5/20(金)の23時59分まで。結果発表は5/31(火)を予定しています。 ※福岡XR部とのコラボイベント開催により、応募締切を5⁄21(土)23時59分まで延長することになりました。 詳細は後述の追加情報よりご確認ください。 是非、受賞を目指してご応募下さい! コンテスト詳細 テーマ ゴハン 対象 iPhoneX以降をお持ちの方 応募方法 ①カタチスペースTwitterアカウントをフォロー ②カタチスペースアプリをダウンロード ③普段のランチやディナーなどを”小物モード”で撮影 ④撮影したカタチのシェアボタンから「#カタチゴハン」をつけてツイート 表彰 最優秀賞:Amazonギフト券3000円分