ガラス割れ 液晶修理

ガラス割れ液晶修理

バッテリー交換

<!DOCTYPE html>

<head>

<title>AI修理受付コンシェルジュ</title>

<style>

@keyframes scan {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(200px); }

}

.scan-line {

animation: scan 2s linear infinite;

background: linear-gradient(to bottom, transparent, #3b82f6, transparent);

}

body { background-color: transparent; }

</style>

</head>

<body>

const { useState, useEffect } = React;

const App = () => {

const [step, setStep] = useState(1);

const [isAnalyzing, setIsAnalyzing] = useState(false);

const [isLoading, setIsLoading] = useState(false);

const [submitted, setSubmitted] = useState(false);

const [formData, setFormData] = useState({

name: '', zip: '', address: '', model: '', tel: '', issue: '', ai_comment: ''

});

const apiKey = ""; // 実行環境から自動提供

const ADMIN_EMAIL = "[email protected]";

// 住所検索 (zipcloud)

const lookupAddress = async (zip) => {

if (zip.length !== 7) return;

setIsLoading(true);

try {

const res = await fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}`);

const data = await res.json();

if (data.results) {

const r = data.results[0];

setFormData(prev => ({ ...prev, address: r.address1 + r.address2 + r.address3 }));

}

} catch (e) { console.error(e); }

setIsLoading(false);

};

// AI解析 (Gemini API)

const analyzeImage = async (e) => {

const file = e.target.files[0];

if (!file) return;

setIsAnalyzing(true);

const reader = new FileReader();

reader.onloadend = async () => {

const base64Data = reader.result.split(',')[1];

const prompt = "画像（スマホ外装、設定画面、身分証）から、name(氏名), address(住所), zip(郵便番号), model(機種名), ai_comment(外観の状態)を抽出し、JSONで返してください。";

try {

const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

contents: [{ parts: [{ text: prompt }, { inlineData: { mimeType: "image/png", data: base64Data } }] }],

generationConfig: { responseMimeType: "application/json" }

})

});

const result = await response.json();

const extracted = JSON.parse(result.candidates[0].content.parts[0].text);

setFormData(prev => ({

...prev,

name: extracted.name || prev.name,

address: extracted.address || prev.address,

zip: extracted.zip || prev.zip,

model: extracted.model || prev.model,

ai_comment: extracted.ai_comment || prev.ai_comment

}));

if (extracted.zip) lookupAddress(extracted.zip.replace('-', ''));

} catch (err) {

alert("解析に失敗しました。直接入力してください。");

}

setIsAnalyzing(false);

};

reader.readAsDataURL(file);

};

const handleSubmit = () => {

setIsLoading(true);

// ここでメール送信やデータ保存の処理をシミュレート

console.log("Sending to:", ADMIN_EMAIL, formData);

setTimeout(() => {

setSubmitted(true);

setIsLoading(false);

}, 1500);

};

if (submitted) {

return (

</div>

<h2 className="text-2xl font-black mb-2">受付完了しました</h2>

<p className="text-slate-500 text-sm mb-6">{formData.name} 様、ありがとうございます。<br/>管理者へ通知を送信しました。</p>

<button onClick={() => window.location.reload()} className="w-full py-4 bg-slate-900 text-white rounded-xl font-black">トップへ戻る</button>

</div>

);

}

return (

<span className="font-black tracking-tighter">AI REPAIR INTAKE</span>

</div>

</div>

{step === 1 && (

<p className="text-[10px] opacity-80 mb-6">外観から機種を特定、書類から住所を抽出します</p>

<i data-lucide="camera"></i> 撮影して自動入力

</label>

</div>

<input type="text" value={formData.name} onChange={e=>setFormData({...formData, name:e.target.value})} className="w-full p-4 bg-slate-50 rounded-xl font-bold border-2 border-transparent focus:border-blue-500 outline-none" placeholder="お名前" />

<input type="text" value={formData.model} onChange={e=>setFormData({...formData, model:e.target.value})} className="w-full p-4 bg-slate-50 rounded-xl font-bold border-2 border-transparent focus:border-blue-500 outline-none" placeholder="機種名" />

</div>

<button onClick={()=>setStep(2)} className="w-full py-5 bg-slate-900 text-white rounded-2xl font-black">次へ進む</button>

</div>

)}

{step === 2 && (

<input type="tel" value={formData.zip} onChange={e=>{setFormData({...formData, zip:e.target.value}); if(e.target.value.length===7) lookupAddress(e.target.value);}} className="flex-1 p-4 bg-slate-50 rounded-xl font-bold outline-none" placeholder="郵便番号" />

<button onClick={()=>lookupAddress(formData.zip)} className="bg-slate-100 px-4 rounded-xl text-slate-400"><i data-lucide="search"></i></button>

</div>

<input type="text" value={formData.address} onChange={e=>setFormData({...formData, address:e.target.value})} className="w-full p-4 bg-slate-50 rounded-xl font-bold outline-none" placeholder="住所" />

<input type="tel" value={formData.tel} onChange={e=>setFormData({...formData, tel:e.target.value})} className="w-full p-4 bg-slate-50 rounded-xl font-bold outline-none" placeholder="電話番号" />

<select value={formData.issue} onChange={e=>setFormData({...formData, issue:e.target.value})} className="w-full p-4 bg-slate-50 rounded-xl font-bold outline-none appearance-none">

<option value="バッテリー">バッテリー交換</option>

</select>

</div>

<button onClick={()=>setStep(1)} className="flex-1 py-5 bg-slate-100 rounded-2xl font-black">戻る</button>

<button onClick={()=>setStep(3)} className="flex-[2] py-5 bg-blue-600 text-white rounded-2xl font-black">確認へ</button>

</div>

)}

{step === 3 && (

<div><p className="text-[10px] opacity-40 uppercase">Customer</p><p className="text-xl font-black">{formData.name} 様</p></div>

<div><p className="text-[10px] opacity-40 uppercase">Device / Issue</p><p className="font-bold">{formData.model} / {formData.issue}</p></div>

<i data-lucide="mail" size="12"></i> 通知先: {ADMIN_EMAIL}

</div>