全体のリファクタ

web/app/routes/resources+/LoginDialog.tsx → web/app/components/LoginDialog.tsx

@@ -7,7 +7,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "~/components/ui/dialog";
-import { GoogleForm } from "./google-form";
+import { GoogleForm } from "../routes/resources+/google-form";
 
 interface LoginDialogProps {
 	isOpen: boolean;

web/app/routes/translate/components/AIModelSelector.tsx → web/app/feature/translate/components/AIModelSelector.tsx

@@ -28,7 +28,7 @@ export function AIModelSelector({ onModelSelect }: AIModelSelectorProps) {
 
 	return (
 		<Select value={selectedModel} onValueChange={handleModelChange}>
-			<SelectTrigger className="w-[200px]">
+			<SelectTrigger>
 				<SelectValue placeholder="Select a model" />
 			</SelectTrigger>
 			<SelectContent>

web/app/feature/translate/utils/addNumbersToContent.ts

@@ -18,7 +18,6 @@ export function shouldProcessElement(element: Element): boolean {
 		"style",
 		"textarea",
 		"input",
-		"pre",
 		"noscript",
 		"iframe",
 		"source",

web/app/feature/translate/utils/extractArticle.ts

@@ -33,10 +33,5 @@ export const extractArticle = (
 
 	const resolvedContent = contentDom.serialize();
 
-	console.log("article", {
-		...article,
-		content: resolvedContent,
-	});
-
 	return { content: resolvedContent, title: article.title };
 };

web/app/feature/translate/utils/gemini.ts

@@ -81,7 +81,9 @@ export async function getGeminiModelResponse(
 	console.error("Max retries reached. Translation failed.");
 	throw lastError || new Error("Translation failed after max retries");
 }
-export async function validateGeminiApiKey(apiKey: string): Promise<boolean> {
+export async function validateGeminiApiKey(
+	apiKey: string,
+): Promise<{ isValid: boolean; errorMessage?: string }> {
 	try {
 		const genAI = new GoogleGenerativeAI(apiKey);
 		const model = genAI.getGenerativeModel({ model: "gemini-pro" });
@@ -90,9 +92,23 @@ export async function validateGeminiApiKey(apiKey: string): Promise<boolean> {
 		const response = await result.response;
 		const text = response.text();
 
-		return text.length > 0;
+		return { isValid: text.length > 0 };
 	} catch (error) {
 		console.error("Gemini API key validation failed:", error);
-		return false;
+		if (
+			error instanceof Error &&
+			error.message.includes("The model is overloaded")
+		) {
+			return {
+				isValid: false,
+				errorMessage:
+					"The model is currently overloaded. Please try again later.",
+			};
+		}
+		return {
+			isValid: false,
+			errorMessage:
+				"Failed to validate the API key. Please check your key and try again.",
+		};
 	}
 }

web/app/routes/reader.$/components/AddTranslationForm.tsx

@@ -4,9 +4,9 @@ import { getZodConstraint } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { useState } from "react";
+import { LoginDialog } from "~/components/LoginDialog";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
 import type { action } from "../route";
 import { addTranslationSchema } from "../types";
 

web/app/routes/reader.$/components/VoteButtons.tsx

@@ -3,7 +3,7 @@ import { parseWithZod } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { memo, useMemo } from "react";
 import { useState } from "react";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
+import { LoginDialog } from "~/components/LoginDialog";
 import { cn } from "~/utils/cn";
 import type { TranslationWithVote } from "../types";
 import { voteSchema } from "../types";

web/app/routes/reader.$/route.tsx

@@ -15,7 +15,6 @@ import { fetchLatestPageVersionWithTranslations } from "./functions/queries.serv
 import { actionSchema } from "./types";
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-	const targetLanguage = await getTargetLanguage(request);
 	const { "*": urlParam } = params;
 
 	if (!urlParam) {
@@ -24,6 +23,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
 	const safeUser = await authenticator.isAuthenticated(request);
 	const safeUserId = safeUser?.id;
+	const targetLanguage = await getTargetLanguage(request);
 	const normalizedUrl = normalizeAndSanitizeUrl(urlParam);
 	const pageData = await fetchLatestPageVersionWithTranslations(
 		normalizedUrl,
@@ -78,15 +78,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 export default function ReaderView() {
-	const { encodedUrl } = useParams();
-	const { targetLanguage, pageData, safeUser } =
-		useTypedLoaderData<typeof loader>();
+	const { "*": urlParam } = useParams();
+	const { pageData, safeUser } = useTypedLoaderData<typeof loader>();
 
 	if (!pageData) {
 		return <div>Loading...</div>;
 	}
 
-	const originalUrl = encodedUrl ? decodeURIComponent(encodedUrl) : "";
+	const originalUrl = urlParam ? decodeURIComponent(urlParam) : "";
 
 	return (
 		<div>

web/app/routes/translate/components/GeminiApiKeyForm.tsx → web/app/routes/resources+/gemini-api-key-form.tsx

@@ -1,23 +1,54 @@
 import { useForm } from "@conform-to/react";
 import { getFormProps, getInputProps } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { Form, useActionData } from "@remix-run/react";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { Link } from "@remix-run/react";
-import { useNavigation } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { ExternalLink, Key } from "lucide-react";
 import { TriangleAlert } from "lucide-react";
+import { z } from "zod";
 import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
-import type { action } from "../route";
-import { geminiApiKeySchema } from "../types";
+import { validateGeminiApiKey } from "~/feature/translate/utils/gemini";
+import { authenticator } from "~/utils/auth.server";
+import { updateGeminiApiKey } from "./functions/mutations.server";
+
+export const geminiApiKeySchema = z.object({
+	geminiApiKey: z.string().min(1, "API key is required"),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+	const safeUser = await authenticator.isAuthenticated(request, {
+		failureRedirect: "/",
+	});
+	const submission = parseWithZod(await request.formData(), {
+		schema: geminiApiKeySchema,
+	});
+	if (submission.status !== "success") {
+		return { lastResult: submission.reply() };
+	}
+
+	const { isValid, errorMessage } = await validateGeminiApiKey(
+		submission.value.geminiApiKey,
+	);
+	if (!isValid) {
+		return {
+			lastResult: submission.reply({
+				formErrors: [errorMessage || "Gemini API key validation failed"],
+			}),
+		};
+	}
+	await updateGeminiApiKey(safeUser.id, submission.value.geminiApiKey);
+	return { lastResult: submission.reply({ resetForm: true }) };
+}
 
 export function GeminiApiKeyForm() {
-	const actionData = useActionData<typeof action>();
-	const navigation = useNavigation();
+	const fetcher = useFetcher<typeof action>();
+	const actionData = fetcher.data;
 	const [form, { geminiApiKey }] = useForm({
 		id: "gemini-api-key-form",
 		lastResult: actionData?.lastResult,
@@ -71,7 +102,11 @@ export function GeminiApiKeyForm() {
 						</AlertDescription>
 					</div>
 				</Alert>
-				<Form method="post" {...getFormProps(form)}>
+				<fetcher.Form
+					method="post"
+					action="/resources/gemini-api-key-form"
+					{...getFormProps(form)}
+				>
 					<div className="flex items-center">
 						<div className="w-full">
 							<Input
@@ -85,12 +120,10 @@ export function GeminiApiKeyForm() {
 						</div>
 						<Button
 							type="submit"
-							name="intent"
-							value="saveGeminiApiKey"
 							size="icon"
-							disabled={navigation.state === "submitting"}
+							disabled={fetcher.state === "submitting"}
 						>
-							{navigation.state === "submitting" ? (
+							{fetcher.state === "submitting" ? (
 								<LoadingSpinner />
 							) : (
 								<Save className="w-4 h-4" />
@@ -107,7 +140,7 @@ export function GeminiApiKeyForm() {
 					{form.errors && (
 						<p className="text-red-500 text-center mt-2">{form.errors}</p>
 					)}
-				</Form>
+				</fetcher.Form>
 			</CardContent>
 		</Card>
 	);

web/app/routes/resources+/google-form.tsx

@@ -4,13 +4,14 @@ import { FcGoogle } from "react-icons/fc";
 import { Button } from "~/components/ui/button";
 import { authenticator } from "~/utils/auth.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export async function action({ request }: ActionFunctionArgs) {
 	return authenticator.authenticate("google", request, {
 		successRedirect: "/api/auth/callback/google",
 		failureRedirect: "/login",
 	});
-};
-export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
+}
+
+export function GoogleForm({ redirectTo }: { redirectTo: string }) {
 	const fetcher = useFetcher();
 	return (
 		<fetcher.Form
@@ -31,4 +32,4 @@ export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
 			</Button>
 		</fetcher.Form>
 	);
-};
+}

web/app/routes/translate/components/URLTranslationForm.tsx

@@ -8,9 +8,9 @@ import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
+import { AIModelSelector } from "~/feature/translate/components/AIModelSelector";
 import type { action } from "../route";
 import { urlTranslationSchema } from "../types";
-import { AIModelSelector } from "./AIModelSelector";
 
 export function URLTranslationForm() {
 	const navigation = useNavigation();
@@ -39,14 +39,11 @@ export function URLTranslationForm() {
 						/>
 						<div id={fields.url.errorId}>{fields.url.errors}</div>
 					</div>
-					<AIModelSelector onModelSelect={setSelectedModel} />
+					<div className="w-[200px]">
+						<AIModelSelector onModelSelect={setSelectedModel} />
+					</div>
 					<input type="hidden" name="model" value={selectedModel} />
-					<Button
-						type="submit"
-						name="intent"
-						value="translateUrl"
-						disabled={navigation.state === "submitting"}
-					>
+					<Button type="submit" disabled={navigation.state === "submitting"}>
 						{navigation.state === "submitting" ? (
 							<LoadingSpinner />
 						) : (
@@ -55,7 +52,7 @@ export function URLTranslationForm() {
 					</Button>
 				</div>
 			</Form>
-			{actionData?.intent === "translateUrl" && actionData?.url && (
+			{actionData?.url && (
 				<Alert className="bg-blue-50 border-blue-200 text-blue-800 animate-in fade-in duration-300">
 					<AlertTitle className="text-center">
 						Translation Job Started

web/app/routes/translate/components/UserAITranslationStatus.tsx

@@ -4,15 +4,18 @@ import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
 import { useNavigation } from "@remix-run/react";
 import { RotateCcw } from "lucide-react";
+import { useState } from "react";
 import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Progress } from "~/components/ui/progress";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { AIModelSelector } from "~/feature/translate/components/AIModelSelector";
 import { cn } from "~/utils/cn";
 import type { UserAITranslationInfoItem } from "../types";
 import { urlTranslationSchema } from "../types";
+
 type UserAITranslationStatusProps = {
 	userAITranslationInfo: UserAITranslationInfoItem[];
 	targetLanguage: string;
@@ -22,6 +25,7 @@ export function UserAITranslationStatus({
 	userAITranslationInfo = [],
 	targetLanguage,
 }: UserAITranslationStatusProps) {
+	const [selectedModel, setSelectedModel] = useState("gemini-1.5-flash");
 	const navigation = useNavigation();
 	const [form, fields] = useForm({
 		id: "url-re-translation-form",
@@ -99,17 +103,23 @@ export function UserAITranslationStatus({
 														name="url"
 														value={item.pageVersion.page.url}
 													/>
+													<div className="w-full">
+														<AIModelSelector onModelSelect={setSelectedModel} />
+														<input
+															type="hidden"
+															name="model"
+															value={selectedModel}
+														/>
+													</div>
 													<Button
 														type="submit"
-														name="intent"
-														value="translateUrl"
 														className="w-full"
 														disabled={navigation.state === "submitting"}
 													>
 														{navigation.state === "submitting" ? (
 															<LoadingSpinner />
 														) : (
-															<RotateCcw className="w-4 h-4" />
+															<RotateCcw className="w-4 h-4 mr-2" />
 														)}
 													</Button>
 												</Form>