import { useState } from 'react'; import Head from 'next/head'; import styles from '../styles/Home.module.css'; export default function Home() { const [url, setUrl] = useState(''); const [loading, setLoading] = useState(false); const [result, setResult] = useState(null); const [error, setError] = useState(null); const [debug, setDebug] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(null); setResult(null); setDebug(null); try { // Ensure URL has a scheme let formattedUrl = url; if (!url.startsWith('http://') && !url.startsWith('https://')) { formattedUrl = 'http://' + url; } console.log('Submitting URL:', formattedUrl); // Use the ApiService instead of direct fetch const data = await window.ApiService.predictUrl(formattedUrl); console.log('Response data:', data); if (data.status === 'error') { throw new Error(data.message || 'Error analyzing URL'); } setResult(data); } catch (err) { console.error('Error:', err); setError(err.message || 'Failed to analyze URL. The service might be unavailable.'); } finally { setLoading(false); } }; const getRiskColor = (score) => { if (score < 30) return '#4caf50'; // Green if (score < 70) return '#ff9800'; // Orange return '#f44336'; // Red }; return (
URL Fraud Detection

URL Fraud Detection

Enter a URL to analyze for potential fraud

setUrl(e.target.value)} placeholder="https://example.com" required />
{error && (

{error}

{debug && (
Debug Information 
{JSON.stringify(debug, null, 2)}
)}
)} {result && (

Analysis Results

{result.fraud_score}%
Risk Score {result.fraud_score < 30 ? 'Low Risk' : result.fraud_score < 70 ? 'Medium Risk' : 'High Risk'}

URL Information

Analyzed URL: {result.url}

{result.is_trusted_domain && (

This appears to be a trusted domain

)}
{result.suspicious_patterns && result.suspicious_patterns.length > 0 && (

Suspicious Patterns

    {result.suspicious_patterns.map((pattern, index) => (
  • {pattern}
    • ))}
)} {result.feature_contributions && (

Risk Factors

{result.feature_contributions.map((feature, index) => (
{feature.name} {feature.percentage}%
))}
)} {debug && (
Connection Information 
{JSON.stringify(debug, null, 2)}
)}
)}
); }