Analyze button on frontpage

app/components/ui/post-form.tsx

@@ -1,9 +1,16 @@
 import { useFetcher } from '@remix-run/react'
 import { type ChangeEvent, useState, type FormEvent } from 'react'
 import { Textarea } from '#app/components/ui/textarea.tsx'
+import {
+	type FallacyList,
+	FallacyListSchema,
+} from '#app/utils/fallacy_detection.ts'
+import { RenderFallacyList } from './post-info-bar.tsx'
 
 export function PostForm({ className }: { className?: string }) {
 	const [textAreaValue, setTextAreaValue] = useState<string>('')
+	const [analysis, setAnalysis] = useState<FallacyList | null>(null)
+	const [isAnalyzing, setIsAnalyzing] = useState(false)
 
 	const [isPrivate, setIsPrivate] = useState<number>(0)
 
@@ -17,22 +24,50 @@ export function PostForm({ className }: { className?: string }) {
 		setIsPrivate(Number(event.target.checked))
 	}
 
+	async function handleAnalyze() {
+		setIsAnalyzing(true)
+		try {
+			const payload = {
+				content: textAreaValue,
+			}
+			const response = await fetch('/analyze', {
+				method: 'POST',
+				body: JSON.stringify(payload),
+				headers: { 'Content-Type': 'application/json' },
+			})
+
+			setAnalysis(FallacyListSchema.parse(await response.json()))
+		} finally {
+			setIsAnalyzing(false)
+		}
+	}
+
 	return (
 		<replyFetcher.Form
 			id="create-post"
 			method="post"
 			action="/createPost"
 			onSubmit={handleSubmit}
 		>
-			<div className={`flex flex-col items-end ${className || ''}`}>
+			<div className={`flex flex-col ${className || ''}`}>
 				<Textarea
 					placeholder="Something that can be voted to be true or false."
 					name="content"
 					value={textAreaValue}
 					onChange={event => setTextAreaValue(event.target.value)}
 					className="mb-2 w-full"
 				/>
-				<div className={'flex flex-row'}>
+				<div className={'flex w-full flex-row'}>
+					<button
+						disabled={isAnalyzing}
+						className=" mr-auto rounded  bg-yellow-200 px-4 py-2 text-base font-bold  text-black dark:bg-yellow-200"
+						onClick={e => {
+							e.preventDefault()
+							handleAnalyze()
+						}}
+					>
+						{isAnalyzing ? 'Analyzing...' : 'Analyze'}
+					</button>
 					<div className="mr-2 mt-2">
 						<input type="hidden" name="isPrivate" value={isPrivate} />
 						<input
@@ -54,6 +89,9 @@ export function PostForm({ className }: { className?: string }) {
 							: 'submitting...'}
 					</button>
 				</div>
+				{analysis && (
+					<RenderFallacyList className="mb-4 mt-4" fallacies={analysis} />
+				)}
 			</div>
 		</replyFetcher.Form>
 	)

app/components/ui/post-info-bar.tsx

@@ -17,7 +17,7 @@ export function PostInfoBar({
 	const isRootPost = post.parentId === null
 
 	const fallacies = fallacyList
-		.filter(f => f.probability >= 0.8)
+		.filter(f => f.probability >= 0.5)
 		.sort((a, b) => b.probability - a.probability)
 
 	const [showDetails, setShowDetails] = useState(false)
@@ -44,29 +44,7 @@ export function PostInfoBar({
 			</div>
 			{showDetails && (
 				<>
-					<div className="my-2">
-						Detected{' '}
-						<a
-							href="https://en.wikipedia.org/wiki/Fallacy"
-							target="_blank"
-							rel="noreferrer"
-							className="underline"
-						>
-							Fallacies
-						</a>
-						:
-					</div>
-					<ul className="mb-4 ml-4 list-disc text-sm">
-						{fallacies.map(f => (
-							<li key={f.name}>
-								<span className={fallacyLabelClassNames}>{f.name}</span>
-								<span className="ml-2">
-									{(f.probability * 100).toFixed(0)}%
-								</span>
-								<div className="mb-4 mt-1">{f.analysis}</div>
-							</li>
-						))}
-					</ul>
+					<RenderFallacyList fallacies={fallacies} className=" mb-4" />
 				</>
 			)}
 		</>
@@ -75,3 +53,39 @@ export function PostInfoBar({
 
 const fallacyLabelClassNames =
 	'rounded-full bg-yellow-200 px-2 text-black dark:bg-yellow-200'
+export function RenderFallacyList({
+	fallacies,
+	className,
+}: {
+	fallacies: { name: string; analysis: string; probability: number }[]
+	className?: string
+}) {
+	return (
+		<div className={`${className || ''}`}>
+			<div className="my-2">
+				Detected{' '}
+				<a
+					href="https://en.wikipedia.org/wiki/Fallacy"
+					target="_blank"
+					rel="noreferrer"
+					className="underline"
+				>
+					Fallacies
+				</a>
+				:
+			</div>
+			<ul className="ml-4 list-disc text-sm">
+				{fallacies.map(f => (
+					<li key={f.name}>
+						<span className={fallacyLabelClassNames}>{f.name}</span>
+						<span className="ml-2">{(f.probability * 100).toFixed(0)}%</span>
+						<div className="mb-4 mt-1">{f.analysis}</div>
+					</li>
+				))}
+				{fallacies.length == 0 && (
+					<p className="py-6">No fallacies detected.</p>
+				)}
+			</ul>
+		</div>
+	)
+}

app/routes/analyze.tsx

@@ -0,0 +1,19 @@
+import { type ActionFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
+import { zfd } from 'zod-form-data'
+
+import { fallacyDetection } from '#app/utils/fallacy_detection.ts'
+
+const postDataSchema = zfd.formData({
+	content: z.coerce.string(),
+})
+
+export const action = async (args: ActionFunctionArgs) => {
+	let request = args.request
+
+	const postData = postDataSchema.parse(await request.json())
+
+	console.log('detecting fallacies...')
+	const detectedFallacies = await fallacyDetection(postData.content)
+	return detectedFallacies
+}

app/routes/index.tsx

@@ -35,7 +35,7 @@ export function FrontpageFeed({
 	feed: FrontPagePost[]
 	loggedIn: boolean
 }) {
-	const [showNewDiscussionForm, setShowNewDiscussionForm] = useState(false)
+	const [showNewDiscussionForm, setShowNewDiscussionForm] = useState(true)
 
 	return (
 		<div>

app/routes/reply.tsx

@@ -47,6 +47,7 @@ export const action = async (args: ActionFunctionArgs) => {
 	try {
 		const detectedFallacies = await detectedFallaciesPromise
 		await storeFallacies(postId, detectedFallacies)
+		console.log('stored fallacies', detectedFallacies)
 	} catch (error) {
 		console.error(error)
 	}