Hugging Face's logo

veela4
/
luna_ocr

ocr
text-extraction
ai
gemini
thai-language
Model card Files
xet
Community
luna_ocr
File size: 2,651 Bytes 
373c769
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React, { useEffect, useState } from 'react';
import AHoleLoader from './AHoleLoader';
import './AHoleLoader.css';

const LoadingScreen = ({ onComplete }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    // Cycling loading messages and colors
    const messages = [
      { text: "LOADING...", color: "#00f8f1" },
      { text: "MADE BY LUNA...", color: "#ff6b9d" },
      { text: "OCR EXTRACTOR...", color: "#4facfe" },
      { text: "LUNA POWERED...", color: "#a855f7" },
      { text: "TEXT EXTRACTION...", color: "#10b981" }
    ];
    
    let messageIndex = 0;
    const textElement = document.getElementById('loading-text');
    
    const cycleMessages = () => {
      if (textElement) {
        const currentMessage = messages[messageIndex];
        textElement.textContent = currentMessage.text;
        textElement.style.color = currentMessage.color;
        textElement.style.textShadow = `0 0 8px ${currentMessage.color}`;
        
        // Update dots color to match
        const dots = document.querySelectorAll('.dot');
        dots.forEach(dot => {
          dot.style.background = currentMessage.color;
          dot.style.boxShadow = `0 0 4px ${currentMessage.color}`;
        });
        
        messageIndex = (messageIndex + 1) % messages.length;
      }
    };
    
    // Start cycling immediately
    cycleMessages();
    const messageTimer = setInterval(cycleMessages, 800);

    // Auto-hide after 4 seconds
    const timer = setTimeout(() => {
      setIsVisible(false);
      setTimeout(() => {
        onComplete?.();
      }, 500); // Wait for fade out animation
    }, 4000);

    return () => {
      clearTimeout(timer);
      clearInterval(messageTimer);
    };
  }, [onComplete]);

  if (!isVisible) {
    return (
      <div 

        className="loading-screen"

        style={{

          opacity: 0,

          transition: 'opacity 0.5s ease',

          pointerEvents: 'none'

        }}

      />
    );
  }

  return (
    <div className="loading-screen">

      <div className="a-hole-container">

        <AHoleLoader />

      </div>

      

      {/* Pixelated loading indicator in bottom left */}

      <div className="pixelated-loading">

        <div className="loading-dots">

          <div className="dot"></div>

          <div className="dot"></div>

          <div className="dot"></div>

          <div className="dot"></div>

        </div>

        <span className="loading-text" id="loading-text">LOADING...</span>

      </div>

    </div>
  );
};

export default LoadingScreen;