Hugging Face発「Reachy Mini」とは？価格・機能・可能性を徹底解説

import React from 'react';

const App = () => {
  const reachyMiniData = {
    title: "Hugging Face発「Reachy Mini」の全貌",
    subtitle: "AI開発とロボティクスを、すべての人へ。オープンソースのデスクトップロボット",
    imageUrl: "https://huggingface.co/blog/assets/reachy-mini/thumbnail.jpg",
    keyHighlights: [
      { label: "価格（Lite版）", value: "$299", unit: "から", source: "https://www.automate.org/industry-insights/hugging-faces-open-source-desktop-pollen-robot-starts-at-299" },
      { label: "コンセプト", value: "オープンソース", unit: "AIロボット", source: "https://huggingface.co/blog/reachy-mini" },
      { label: "高さ", value: "28 cm", unit: "(11インチ)", source: "https://huggingface.co/blog/reachy-mini" },
      { label: "重量", value: "1.5 kg", unit: "(3.3ポンド)", source: "https://medium.com/@mehulgupta_7991/reachy-mini-1st-open-source-robot-by-huggingface-147f39c5151a" }
    ],
    versions: [
      {
        name: "Reachy Mini Lite",
        price: "$299",
        computing: "外部コンピュータに接続 (Mac/Linux対応、Windowsは近日)",
        connectivity: "有線",
        shipping: "2025年8月出荷開始予定",
        source: "https://www.technology.org/2025/07/09/hugging-face-reachy-mini-desktop-robots-now-available-for-order/"
      },
      {
        name: "Reachy Mini Wireless",
        price: "$449",
        computing: "オンボード (Raspberry Pi 5)",
        connectivity: "WiFi, バッテリー内蔵",
        shipping: "2025年後半に出荷予定",
        source: "https://www.automate.org/industry-insights/hugging-faces-open-source-desktop-pollen-robot-starts-at-299"
      }
    ],
    techSpecs: [
      { name: "ヘッド", detail: "6自由度 (DOF)" },
      { name: "ボディ", detail: "全身回転" },
      { name: "アンテナ", detail: "アニメーションするアンテナ x2" },
      { name: "カメラ", detail: "広角カメラ" },
      { name: "マイク", detail: "搭載 (Wireless版はx4)" },
      { name: "スピーカー", detail: "5W スピーカー" },
      { name: "センサー", detail: "加速度計" },
      { name: "プログラミング", detail: "Python (JS/Scratch対応予定)" }
    ],
    useCases: [
      { title: "AI開発・実験", description: "最新の音声・視覚モデルを物理インターフェースで実験。" },
      { title: "教育・学習", description: "手頃な価格でロボティクスの概念を探求。" },
      { title: "コーディング・ハッキング", description: "Pythonで自由にプログラムし、機能を拡張。" },
      { title: "クリエイティブ・プロトタイピング", description: "インタラクティブなアプリケーションを迅速に構築・共有。" }
    ],
    philosophy: [
        { title: "オープンソース", description: "ハードウェア、ソフトウェア、シミュレーションの全てが公開され、コミュニティによる改善が可能。", source: "https://huggingface.co/blog/reachy-mini" },
        { title: "コミュニティ主導", description: "1000万人以上のHugging Faceコミュニティと動作やアプリを共有。", source: "https://venturebeat.com/ai/hugging-face-just-launched-a-299-robot-that-could-disrupt-the-entire-robotics-industry/"},
        { title: "アクセシビリティ", description: "高価な産業用ロボットの障壁を打破し、誰でもAIロボティクスに触れられる機会を提供。", source: "https://www.automate.org/industry-insights/hugging-faces-open-source-desktop-pollen-robot-starts-at-299" }
    ]
  };

  const Card = ({ children, className }) => (
    <div className={`bg-white rounded-xl shadow-md p-6 ${className}`}>{children}</div>
  );

  return (
    <div className="bg-gray-50 min-h-screen font-sans text-gray-800">
      <header className="bg-gray-900 text-white text-center py-8 shadow-lg">
        <h1 className="text-4xl font-bold">{reachyMiniData.title}</h1>
        <p className="text-lg mt-2 opacity-90">{reachyMiniData.subtitle}</p>
      </header>

      <main className="container mx-auto px-4 py-8">
        <Card className="mb-8 overflow-hidden">
          <h2 className="text-2xl font-bold mb-4 text-center">はじめに</h2>
          <img src={reachyMiniData.imageUrl} alt="Reachy Mini Robot" className="w-full max-w-lg mx-auto rounded-lg shadow-xl"/>
        </Card>

        <section className="mb-8">
            <h2 className="text-2xl font-bold mb-4 text-center">主な特徴</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {reachyMiniData.keyHighlights.map((item, index) => (
                    <div key={index} className="bg-white p-4 rounded-lg shadow text-center">
                        <p className="text-sm text-gray-500">{item.label}</p>
                        <p className="text-3xl font-bold text-indigo-600">{item.value}<span className="text-base font-normal text-gray-600 ml-1">{item.unit}</span></p>
                        <a href={item.source} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 hover:underline">出典</a>
                    </div>
                ))}
            </div>
        </section>

        <Card className="mb-8">
            <h2 className="text-2xl font-bold mb-4 text-center">モデル比較</h2>
            <div className="overflow-x-auto">
                <table className="w-full text-left table-auto">
                    <thead>
                        <tr className="bg-gray-100">
                            <th className="p-3 font-semibold">モデル</th>
                            <th className="p-3 font-semibold">価格</th>
                            <th className="p-3 font-semibold">コンピューティング</th>
                            <th className="p-3 font-semibold">接続性</th>
                            <th className="p-3 font-semibold">出荷予定</th>
                        </tr>
                    </thead>
                    <tbody>
                        {reachyMiniData.versions.map((version, index) => (
                            <tr key={index} className="border-b">
  <td className="p-3 font-bold text-indigo-700">{version.name}</td>
  <td className="p-3 text-xl font-semibold">{version.price}</td>
  <td className="p-3">{version.computing}</td>
  <td className="p-3">{version.connectivity}</td>
  <td className="p-3">{version.shipping} <a href={version.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">[出典]</a></td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </Card>

        <div className="grid md:grid-cols-2 gap-8 mb-8">
            <Card>
                <h2 className="text-2xl font-bold mb-4 text-center">技術仕様</h2>
                <ul className="grid grid-cols-2 gap-x-4 gap-y-2">
                    {reachyMiniData.techSpecs.map((spec, index) => (
                        <li key={index} className="flex items-center text-sm p-2 bg-gray-50 rounded">
                            <span className="font-semibold mr-2">{spec.name}:</span> {spec.detail}
                        </li>
                    ))}
                </ul>
                 <p className="text-xs text-center mt-4 text-gray-500">出典: <a href="https://huggingface.co/blog/reachy-mini" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Hugging Face Blog</a>, <a href="https://venturebeat.com/ai/hugging-face-just-launched-a-299-robot-that-could-disrupt-the-entire-robotics-industry/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">VentureBeat</a></p>
            </Card>
            <Card>
                <h2 className="text-2xl font-bold mb-4 text-center">主な用途</h2>
                <ul className="space-y-3">
                    {reachyMiniData.useCases.map((useCase, index) => (
                        <li key={index}>
                            <p className="font-semibold">{useCase.title}</p>
                            <p className="text-sm text-gray-600">{useCase.description}</p>
                        </li>
                    ))}
                </ul>
                 <p className="text-xs text-center mt-4 text-gray-500">出典: <a href="https://www.pollen-robotics.com/reachy-mini/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Pollen Robotics</a>, <a href="https://huggingface.co/pollen-robotics" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Hugging Face</a></p>
            </Card>
        </div>

         <Card>
          <h2 className="text-2xl font-bold mb-4 text-center">開発哲学とオープンソース戦略</h2>
          <div className="space-y-4">
            {reachyMiniData.philosophy.map((item, index) => (
              <div key={index}>
                <h3 className="font-semibold text-lg text-indigo-700">{item.title}</h3>
                <p className="text-gray-600">{item.description} <a href={item.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline text-xs">[出典]</a></p>
              </div>
            ))}
          </div>
        </Card>

      </main>
      
      <footer className="text-center py-4 text-sm text-gray-500 bg-gray-100 mt-8">
        <p>この情報は提供されたコンテキストに基づいて生成されました。</p>
        <p>最終更新日: 2025-07-10</p>
      </footer>
    </div>
  );
};

export default App;