Hugging Face's logo

Spaces:
dbeck22
/
error-coin-explorer
Running

App Files Community
error-coin-explorer
File size: 6,946 Bytes
c95fe7b
 
 
 
 
8922787
 
c95fe7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8922787
 
c95fe7b
 
8922787
c95fe7b
8922787
c95fe7b
8922787
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c95fe7b
8922787
c95fe7b
 
 
 
 
 
 
8922787
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c95fe7b
 
 
 
 
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marcus Mint - AI Coin Expert</title>
<link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <header class="text-center mb-16">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                <i data-feather="award" class="inline mr-2"></i>
                Marcus Mint
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                AI-powered coin identification and valuation expert for collectors and investors.
            </p>
</header>
        <main class="flex flex-col items-center">
            <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-2xl mb-8">
                <div class="text-center mb-6">
                    <i data-feather="camera" class="w-12 h-12 text-primary mx-auto mb-4"></i>
                    <h2 class="text-2xl font-semibold text-gray-800 mb-2">Coin Identifier</h2>
                    <p class="text-gray-600">Upload an image of your coin for instant analysis</p>
                </div>
                
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-1">
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
                            <div id="preview" class="hidden mb-4">
                                <img id="previewImage" src="#" alt="Preview" class="max-h-64 mx-auto">
                            </div>
                            <label for="coinImage" class="cursor-pointer">
                                <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
                                <p class="text-gray-500">Click to upload coin image</p>
                                <input type="file" id="coinImage" accept="image/*" class="hidden">
                            </label>
                        </div>
                        <button id="analyzeBtn" class="w-full bg-primary hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
                            Analyze Coin
                        </button>
                    </div>
                    
                    <div class="flex-1">
                        <div class="bg-gray-50 rounded-lg p-6 h-full">
                            <h3 class="font-medium text-gray-700 mb-3">Analysis Results</h3>
                            <div id="results" class="text-gray-600">
                                <p class="text-center py-8">Your coin details will appear here after analysis</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</main>

        <footer class="mt-20 text-center text-gray-500 text-sm">
            <p>© 2023 Error Coin Explorer. All rights reserved.</p>
        </footer>
    </div>
    <script>
        feather.replace();
        
        document.getElementById('coinImage').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const preview = document.getElementById('preview');
                    const previewImage = document.getElementById('previewImage');
                    previewImage.src = event.target.result;
                    preview.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('analyzeBtn').addEventListener('click', function() {
            const fileInput = document.getElementById('coinImage');
            if (!fileInput.files[0]) {
                alert('Please upload a coin image first');
                return;
            }

            // Show loading state
            const results = document.getElementById('results');
            results.innerHTML = `
                <div class="flex items-center justify-center py-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mr-3"></div>
                    <span>Analyzing your coin...</span>
                </div>
            `;

            // Simulate API call (replace with actual API integration)
            setTimeout(() => {
                // Mock response - replace with real data from your API
                const mockResponse = {
                    coinType: "2005 Kansas State Quarter",
                    errorType: "Die Break Error",
                    rarity: "Rare (1 in 10,000)",
                    estimatedValue: "$50 - $200",
                    description: "This coin shows a clear die break error on the obverse side, creating an extra metal protrusion near the date. These errors occur when part of the die breaks off during the minting process."
                };

                results.innerHTML = `
                    <div class="space-y-3">
                        <div>
                            <p class="text-sm text-gray-500">Coin Type</p>
                            <p class="font-medium">${mockResponse.coinType}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Error Type</p>
                            <p class="font-medium">${mockResponse.errorType}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Rarity</p>
                            <p class="font-medium">${mockResponse.rarity}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Estimated Value</p>
                            <p class="font-medium text-primary">${mockResponse.estimatedValue}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Description</p>
                            <p>${mockResponse.description}</p>
                        </div>
                    </div>
                `;
            }, 2000);
        });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>