[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","684a52aeed348191bb0334df8d003ce3","versionInt","title","Prompt Builder Ui","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n} from \"@/components/ui/select\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Button } from \"@/components/ui/button\";\nimport { Copy, X, RotateCcw } from \"lucide-react\";\n\nconst intensityTokens = [\"\", \"very weak\", \"weak\", \"moderate\", \"strong\", \"very strong\"];\nconst intensityLabels = [\"未指定\", \"とても弱い\", \"弱い\", \"標準\", \"強い\", \"とても強い\"];\n\nconst lightingTypes = [\n { label: \"なし\", token: \" \" },\n { label: \"硬い光\", token: \"hard light\" },\n { label: \"柔らかい光\", token: \"soft light\" },\n { label: \"逆光\", token: \"backlight\" },\n { label: \"側光\", token: \"sidelight\" },\n { label: \"トップライト\", token: \"top light\" },\n { label: \"ローキー\", token: \"low key\" },\n { label: \"ハイキー\", token: \"high key\" },\n { label: \"窓光・スポット光・点光源\", token: \"directional light\" },\n];\n\nconst leadingLines = [\n { label: \"なし\", token: \" \" },\n { label: \"対角線構図\", token: \"diagonal composition\" },\n { label: \"三角構図\", token: \"triangular composition\" },\n { label: \"リード線\", token: \"leading lines\" },\n { label: \"放射線構図\", token: \"radial composition\" },\n { label: \"S字構図\", token: \"s-curve\" },\n { label: \"黄金比構図\", token: \"golden ratio\" },\n { label: \"フレームインフレーム\", token: \"frame within frame\" },\n];\n\nconst cameraAngles = [\n { label: \"なし\", token: \" \" },\n { label: \"アイレベル\", token: \"eye-level\" },\n { label: \"俯瞰\", token: \"high angle\" },\n { label: \"煽り\", token: \"low angle\" },\n { label: \"真上\", token: \"overhead\" },\n { label: \"真下\", token: \"worm's-eye\" },\n { label: \"真後ろ\", token: \"back view\" },\n { label: \"斜めショット\", token: \"dutch angle\" },\n];\n\nconst subjectPositions = [\n { label: \"なし\", token: \" \" },\n { label: \"中央配置\", token: \"center\" },\n { label: \"三分割の交点\", token: \"rule of thirds\" },\n { label: \"左寄り配置\", token: \"left aligned\" },\n { label: \"右寄り配置\", token: \"right aligned\" },\n { label: \"端の配置\", token: \"edge framing\" },\n { label: \"手前・画面外に視線\", token: \"looking outside frame\" },\n];\n\nconst colorPalettes = [\n { label: \"なし\", token: \" \" },\n { label: \"暖色系\", token: \"warm\" },\n { label: \"寒色系\", token: \"cool\" },\n { label: \"モノクローム\", token: \"monochrome\" },\n { label: \"コントラスト強め\", token: \"high contrast\" },\n { label: \"色制限あり\", token: \"limited palette\" },\n { label: \"セピア\", token: \"sepia\" },\n { label: \"シネマティックトーン\", token: \"teal & orange\" },\n];\n\nconst textures = [\n { label: \"なし\", token: \" \" },\n { label: \"フィルムグレイン\", token: \"film grain\" },\n { label: \"ノイズなし\", token: \"clean\" },\n { label: \"ざらつき\", token: \"rough\" },\n { label: \"ソフト\", token: \"soft\" },\n { label: \"グロウ\", token: \"glow\" },\n { label: \"シャープ\", token: \"sharp\" },\n { label: \"霧がかった\", token: \"hazy\" },\n];\n\nconst cameraMovements = [\n { label: \"なし\", token: \" \" },\n { label: \"パン\", token: \"pan\" },\n { label: \"ティルト\", token: \"tilt\" },\n { label: \"ドリーイン\", token: \"dolly in\" },\n { label: \"ドリーアウト\", token: \"dolly out\" },\n { label: \"トラック\", token: \"trucking\" },\n { label: \"クレーンアップ\", token: \"crane up\" },\n { label: \"クレーンダウン\", token: \"crane down\" },\n];\n\nconst moods = [\n { label: \"なし\", token: \" \" },\n { label: \"サイエンスフィクション\", token: \"science-fiction\" },\n { label: \"ファンタジー\", token: \"fantasy\" },\n { label: \"ホラー\", token: \"horror\" },\n { label: \"ロマンス\", token: \"romance\" },\n { label: \"ノワール\", token: \"noir\" },\n { label: \"サイバーパンク\", token: \"cyberpunk\" },\n { label: \"ドキュメンタリー風\", token: \"documentary style\" },\n { label: \"カートゥーン\", token: \"cartoon\" },\n];\n\nconst aspectRatios = [\n { label: \"なし\", token: \" \" },\n { label: \"16:9\", token: \"16:9\" },\n { label: \"9:16\", token: \"9:16\" },\n { label: \"1:1\", token: \"1:1\" },\n { label: \"21:9\", token: \"21:9\" },\n];\n\nconst whiteBalances = [\n { label: \"なし\", token: \" \" },\n { label: \"昼光（晴天）\", token: \"daylight\" },\n { label: \"曇天\", token: \"cloudy\" },\n { label: \"電球（白熱灯）\", token: \"tungsten\" },\n { label: \"蛍光灯\", token: \"fluorescent\" },\n { label: \"フィルム風（暖色）\", token: \"cinematic warm tone\" },\n { label: \"寒色（青み）\", token: \"cool tone\" },\n { label: \"夕暮れ・マジックアワー\", token: \"golden hour\" },\n];\n\nconst LabeledSelect = ({ label, options, value, onChange }) => (\n

\n {label}\n \n

\n {value && (\n \n )}\n

\n);\n\nconst LabeledSlider = ({ label, value, onChange }) => (\n

\n \n {label}\n ({intensityLabels[value]})\n \n onChange(v[0])} />\n

\n {value !== 0 && (\n \n )}\n

\n);\n\nexport default function PromptBuilder() {\n const [description, setDescription] = useState(\"\");\n const [lightingLevel, setLightingLevel] = useState(0);\n const [dofLevel, setDofLevel] = useState(0);\n const [motionBlurLevel, setMotionBlurLevel] = useState(0);\n const [lightingType, setLightingType] = useState();\n const [leadingLine, setLeadingLine] = useState();\n const [cameraAngle, setCameraAngle] = useState();\n const [subjectPosition, setSubjectPosition] = useState();\n const [colorPalette, setColorPalette] = useState();\n const [texture, setTexture] = useState();\n const [cameraMovement, setCameraMovement] = useState();\n const [mood, setMood] = useState();\n const [aspectRatio, setAspectRatio] = useState();\n const [whiteBalance, setWhiteBalance] = useState();\n\n const resetAll = () => {\n setDescription(\"\");\n setLightingLevel(0);\n setDofLevel(0);\n setMotionBlurLevel(0);\n setLightingType();\n setLeadingLine();\n setCameraAngle();\n setSubjectPosition();\n setColorPalette();\n setTexture();\n setCameraMovement();\n setMood();\n setAspectRatio();\n setWhiteBalance();\n };\n\n const prompt = useMemo(() => {\n if (!description.trim()) return \"\";\n const parts = [description.trim()];\n\n if (lightingType) {\n const token = intensityTokens[lightingLevel];\n parts.push(token ? `${token} ${lightingType}` : lightingType);\n }\n if (leadingLine) parts.push(leadingLine);\n if (cameraAngle) parts.push(cameraAngle);\n if (subjectPosition) parts.push(subjectPosition);\n if (dofLevel !== 0) parts.push(`${intensityTokens[dofLevel]} depth of field`);\n if (colorPalette) parts.push(colorPalette);\n if (whiteBalance) parts.push(whiteBalance);\n if (motionBlurLevel !== 0) parts.push(`${intensityTokens[motionBlurLevel]} motion blur`);\n if (texture) parts.push(texture);\n if (aspectRatio) parts.push(aspectRatio);\n if (cameraMovement) parts.push(cameraMovement);\n if (mood) parts.push(mood);\n\n return parts.map((p) => p.trim()).filter(Boolean).join(\", \");\n }, [\n description,\n lightingType,\n lightingLevel,\n leadingLine,\n cameraAngle,\n subjectPosition,\n dofLevel,\n colorPalette,\n motionBlurLevel,\n texture,\n aspectRatio,\n cameraMovement,\n mood,\n whiteBalance,\n ]);\n\n const handleCopy = () => {\n if (prompt)\n navigator.clipboard.writeText(prompt).then(() => alert(\"Copied to clipboard!\"));\n };\n\n return (\n \n \n

\n 描写内容\n setDescription(e.target.value)}\n />\n

\n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n

\n 生成プロンプト (英語)\n

\n          <div className=\"flex justify-between\">\n            <Button variant=\"secondary\" onClick={resetAll} className=\"gap-1\">\n              <RotateCcw size={16} />リセット\n            </Button>\n            <Button variant=\"outline\" disabled={!prompt} onClick={handleCopy} className=\"gap-1\">\n              <Copy size={16} />コピー\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","11764189035025542972","traceTime",1777395495184]
</article></body></html>