Realays AI活用事例: FruitsFace & Dalendar

これまで私たちはEdge IntelligenceとWeb ML技術について探求しました。しかし技術はユーザーに価値を伝える時だけ意味があります。Realaysは先述べた最先端技術を実際のサービスに接合して、ユーザーに新しく安全な経験を提供しています。

1. FruitsFace: プライバシーを守る顔型分析

サービス概要

FruitsFaceはユーザーの顔型を果物に例えて楽しく分析してくれるサービスです。単純な楽しみを超えて、核心価値は完璧なプライバシー保護です。

核心特徴:

• 📸 写真がサーバーに伝送されない
• 🔒 すべてのAI分析がブラウザ内で完了
• ⚡ リアルタイム結果提供
• 🌐 インターネットなしでも動作 (オフラインモード)

技術的実装

1段階: 顔検出 (Face Detection)

// MediaPipe Face Detection使用
import "@mediapipe/face_detection";
import { FaceDetection } from "@mediapipe/face_detection";

const faceDetection = new FaceDetection({
  locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/${file}`;
  },
});

faceDetection.setOptions({
  model: "short", // 近距離顔検出
  minDetectionConfidence: 0.5,
});

faceDetection.onResults((results) => {
  if (results.detections.length > 0) {
    const detection = results.detections[0];
    analyzeFaceShape(detection);
  }
});

// ユーザー画像処理
await faceDetection.send({ image: imageElement });

2段階: 顔ランドマーク抽出

// 68個の顔ポイント抽出
import "@mediapipe/face_mesh";

const faceMesh = new FaceMesh({
  locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
  },
});

faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5,
});

faceMesh.onResults((results) => {
  const landmarks = results.multiFaceLandmarks[0];
  const faceShape = calculateFaceShape(landmarks);
  displayResult(faceShape);
});

3段階: 顔型分類

顔ランドマークをもとに主要比率を計算します:

function calculateFaceShape(landmarks) {
  // 顔の幅 (178-234インデックス)
  const faceWidth = distance(landmarks[234], landmarks[454]);

  // 顔の長さ (10-152インデックス)
  const faceLength = distance(landmarks[10], landmarks[152]);

  // 頬骨の幅 (123-352インデックス)
  const cheekWidth = distance(landmarks[123], landmarks[352]);

  // 顎の幅 (172-397インデックス)
  const jawWidth = distance(landmarks[172], landmarks[397]);

  // 比率計算
  const lengthToWidthRatio = faceLength / faceWidth;
  const cheekToJawRatio = cheekWidth / jawWidth;

  // 顔型分類
  if (lengthToWidthRatio > 1.3 && cheekToJawRatio < 1.1) {
    return {
      type: "banana", // 長形
      description: "洗練されて細い印象",
      recommendations: ["ロングヘアスタイル", "丸いサングラス"],
    };
  } else if (lengthToWidthRatio < 1.1 && cheekToJawRatio > 1.2) {
    return {
      type: "apple", // 丸形
      description: "柔らかくて親しい印象",
      recommendations: ["角張った眼鏡", "側面ボリュームヘア"],
    };
  }
  // ... 残りの果物タイプ
}

function distance(point1, point2) {
  const dx = point1.x - point2.x;
  const dy = point1.y - point2.y;
  return Math.sqrt(dx * dx + dy * dy);
}

性能最適化

モデル軽量化

// WebGPUバックエンド活性化 (可能な場合)
if (navigator.gpu) {
  await tf.setBackend("webgpu");
} else {
  await tf.setBackend("webgl");
}

// 量子化されたモデル使用
const model = await tf.loadGraphModel("face_model_quantized/model.json");

プログレッシブロード

// 必須モデルだけ先にロード
async function initializeApp() {
  // 1段階: 顔検出モデル (2MB)
  showProgress("顔検出モデルロード中...", 33);
  await loadFaceDetection();

  // 2階: ランドマークモデル (8MB)
  showProgress("詳細分析モデルロード中...", 66);
  await loadFaceMesh();

  // 3段階: 分類モデル (1MB)
  showProgress("分類モデルロード中...", 100);
  await loadClassifier();

  hideProgress();
  enableCamera();
}

ユーザー経験

Before (サーバーベース):

1. 写真アップロード (プライバシー懸念)
2. サーバー伝送待ち (~2秒)
3. AI処理待ち (~1秒)
4. 結果受信 Total: ~3秒 + プライバシーリスク

After (Edge AI):

1. ブラウザで即座に処理
2. リアルタイムフィードバック (<100ms) Total: ~0.1秒 + 完璧なプライバシー

2. Dalendar: スマートカレンダー with AI

サービス概要

Dalendarは韓国の旧暦/新暦システムを完璧にサポートするスマートカレンダーアプリです。

AI機能:

• 📅 自然言語スケジュール入力: “来週火曜日午後3時会議”
• 🔍 スマート検索: “先月歯科予約”
• 💡 スケジュール提案: 反復パターン感知と自動提案
• 🌙 旧暦/新暦自動変換

技術的実装

自然言語処理 (NLP)

// MLC-LLMで軽量LLM実行
import * as webllm from "@mlc-ai/web-llm";

const engine = await webllm.CreateMLCEngine("Phi-2-quantized", {
  initProgressCallback: (progress) => {
    console.log(`モデルロード: ${progress.progress}%`);
  },
});

async function parseNaturalLanguage(input) {
  const prompt = `次の文からスケジュール情報をJSONで抽出してください:
"${input}"

形式:
{
    "title": "スケジュールタイトル",
    "date": "YYYY-MM-DD",
    "time": "HH:MM",
    "duration": "分単位"
}`;

  const reply = await engine.chat.completions.create({
    messages: [{ role: "user", content: prompt }],
    temperature: 0.1,
    max_tokens: 150,
  });

  const jsonMatch = reply.choices[0].message.content.match(/\{[\s\S]*\}/);
  if (jsonMatch) {
    return JSON.parse(jsonMatch[0]);
  }

  return null;
}

// 使用例
const eventInfo = await parseNaturalLanguage("来週金曜日夕方7時夕食約束");
// 結果: { title: "夕食約束", date: "2026-02-19", time: "19:00", duration: 60 }

最適化結果

メトリック	Before	After	改善
自然言語パース	サーバーAPI (~500ms)	オンデバイス (~150ms)	70%速い
プライバシー	サーバー伝送	完全ローカル	100%安全
オフライン	不可能	完璧対応	新規機能
日付計算	245μs	89μs	175%速い

3. 共通アーキテクチャパターン

両サービスとも同じEdge AIアーキテクチャに従います:

[ユーザー入力]
    ↓
[ブラウザ内前処理]
    ↓
[WebGPU/WebGL加速AIモデル]
    ↓
[ブラウザ内後処理]
    ↓
[リアルタイム結果表示]

→ サーバー伝送なし
→ 完璧なプライバシー
→ 超高速応答

4. 学習と改善

プライバシーを守りながらモデル改善

ユーザーデータを収集せずにモデルを改善する方法:

Federated Learning (連合学習)

// ユーザーブラウザでモデルfine-tuning
async function localFineTuning(userFeedback) {
  // 1. ユーザーフィードバックをもとにローカルで微調整
  const localModel = await tf.loadLayersModel("indexeddb://local-model");

  // 2. 更新された重みだけ暗号化してサーバーに伝送
  const gradients = await localModel.getWeights();
  const encryptedGradients = await encryptFederatedUpdate(gradients);

  await fetch("/api/federated-update", {
    method: "POST",
    body: JSON.stringify(encryptedGradients),
  });

  // 3. 元データはブラウザにのみ存在
}

まとめ

Realaysの2つのサービスは、技術がどのように実際の価値に転換されるかを示します:

FruitsFace:

• Edge AIで完璧なプライバシー保護
• リアルタイムフィードバックで優れたUX
• 楽しみと実用性の結合

Dalendar:

• オンデバイスLLMでスマートなスケジュール管理
• EAFアルゴリズムで超高速日付計算
• 韓国文化に最適化された機能

核心価値:

1. プライバシーが選択でなく基本値
2. ネットワークなしでも完璧な機能
3. 速い応答時間で自然なUX
4. ユーザー経験を害さないAI

次のプロジェクトでEdge Intelligenceを考慮してみてください。より良い世界を作ることができます。