Home
Tanvir Hasan Bappy (Tanvir)
Fake Medicine Detector

Fake Medicine Detector

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 20-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

552

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="medicineScanner()">
<head>
  <meta charset="UTF-8" />
  <title>Fake Medicine Detector</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full">
    <h1 class="text-2xl font-semibold mb-6 text-center text-indigo-700">Fake Medicine Detector</h1>

<form @submit.prevent="submitForm" class="space-y-4" enctype="multipart/form-data" novalidate>
      <div>
        <label for="imageInput" class="block text-gray-700 font-medium mb-2">Upload medicine package image:</label>
        <input
          type="file"
          id="imageInput"
          name="image"
          accept="image/*"
          @change="fileChosen"
          class="block w-full text-sm text-gray-600
                 file:mr-4 file:py-2 file:px-4
                 file:rounded file:border-0
                 file:text-sm file:font-semibold
                 file:bg-indigo-100 file:text-indigo-700
                 hover:file:bg-indigo-200
                 cursor-pointer"
          :disabled="cameraActive"
          required
        />
      </div>

<div x-show="cameraActive" class="mt-6 text-center">
      <video
        id="video"
        autoplay
        playsinline
        class="mx-auto rounded-md border border-gray-300 shadow-md max-w-full"
        style="max-height: 300px;"
      ></video>

<div class="mt-2">
        <button
          @click="capturePhoto"
          class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-700"
          :disabled="loading"
        >
          Capture Photo
        </button>
      </div>
    </div>

<template x-if="result">
      <div
        x-text="result.message"
        :class="{
          'bg-green-100 text-green-800 border-green-400': result.status === 'genuine',
          'bg-yellow-100 text-yellow-800 border-yellow-400': result.status === 'expired',
          'bg-red-100 text-red-800 border-red-400': result.status === 'fake',
        }"
        class="mt-6 p-4 border rounded-md font-semibold"
      ></div>
    </template>

<template x-if="result">
      <div class="mt-4 text-gray-700 space-y-1">
        <p><strong>Batch No:</strong> <span x-text="result.data.batch"></span></p>
        <p><strong>Expiry Date:</strong> <span x-text="result.data.expiry"></span></p>
        <p><strong>Medicine Code:</strong> <span x-text="result.data.code"></span></p>
      </div>
    </template>
  </div>

fileChosen(event) {
          this.file = event.target.files[0] || null;
          this.result = null;
          if (this.cameraActive) this.stopCamera();
        },

toggleCamera() {
          if (this.cameraActive) {
            this.stopCamera();
          } else {
            this.startCamera();
          }
        },

async startCamera() {
          this.result = null;
          this.file = null;

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            alert('Camera API not supported in this browser.');
            return;
          }

try {
            this.videoStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
            this.cameraActive = true;
            const video = document.getElementById('video');
            video.srcObject = this.videoStream;
            await video.play();
          } catch (error) {
            alert('Unable to access camera: ' + error.message);
          }
        },

stopCamera() {
          if (this.videoStream) {
            this.videoStream.getTracks().forEach(track => track.stop());
            this.videoStream = null;
          }
          this.cameraActive = false;
          const video = document.getElementById('video');
          if (video) video.srcObject = null;
        },

capturePhoto() {
          if (!this.cameraActive) return;

const video = document.getElementById('video');
          const canvas = document.createElement('canvas');
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

const ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

canvas.toBlob(blob => {
            this.file = new File([blob], 'capture.png', { type: 'image/png' });
            this.result = null;
            this.stopCamera();
            this.submitForm();
          }, 'image/png');
        },

async submitForm() {
          if (!this.file) return;

this.loading = true;
          this.result = null;

const formData = new FormData();
          formData.append('image', this.file);

try {
            const response = await fetch('/scan', {
              method: 'POST',
              body: formData,
            });

if (!response.ok) throw new Error('Network error');

const data = await response.json();
            this.result = data;

} catch (error) {
            this.result = {
              status: 'fake',
              message: 'Error scanning medicine. Please try again.',
              data: { batch: '', expiry: '', code: '' }
            };
          } finally {
            this.loading = false;
          }
        }
      }
    }
  </script>
</body>
</html>

Related Examples

3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

7 months ago

482
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

4 months ago

245
Forgot password form

Author:
ariaw

2 months ago

201
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

6 months ago

408
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

3 months ago

209
chatbot
is my chatbot

Author:
Omer fils ELENGA

2 months ago

294
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

811
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.7k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.3k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

8 months ago

961
Resizable container
Resizable container

Author:
Ganesh Salunke

3 weeks ago

11

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components