CraftConnect/ai-matching.html at main · Samridhi002/CraftConnect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Powered Matching - CraftConnect</title>
    <link rel="icon" href="imagefavicon.jpg" type="image/jpeg">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-center mb-8">CraftConnect AI-Powered Matching</h1>

        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
            <div class="p-8">
                <form id="preferencesForm" class="space-y-4">
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700">Preferred Category:</label>
                        <input type="text" id="category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
                    </div>
                    <div>
                        <label for="priceRange" class="block text-sm font-medium text-gray-700">Price Range:</label>
                        <input type="text" id="priceRange" name="priceRange" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
                    </div>
                    <div>
                        <label for="style" class="block text-sm font-medium text-gray-700">Preferred Style:</label>
                        <input type="text" id="style" name="style" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
                    </div>
                    <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Get AI Suggestions</button>
                </form>
                <div id="suggestions" class="mt-8"></div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('preferencesForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const category = document.getElementById('category').value;
            const priceRange = document.getElementById('priceRange').value;
            const style = document.getElementById('style').value;

            const userPreferences = { category, priceRange, style };

            try {
                const response = await fetch('/api/ai-match', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ userPreferences }),
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json();
                document.getElementById('suggestions').innerHTML = `
                    <h3 class="text-xl font-bold mb-4">AI Suggestions:</h3>
                    <pre class="whitespace-pre-wrap">${data.suggestions}</pre>
                `;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('suggestions').innerHTML = '<p class="text-red-500">An error occurred while fetching AI suggestions.</p>';
            }
        });
    </script>
</body>
</html>