Hugging Face's logo

Spaces:
Leon4gr45
/
openoperator
Build error

App Files Community
7
openoperator
File size: 5,064 Bytes
75fefa7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
150
151
152
153
154
155
156
157
158
159
160
 
import { useCallback, useEffect, useState } from "react";

import CurvyRect, { Connector } from "@/components/shared/layout/curvy-rect";
import { encryptText } from "@/components/app/(home)/sections/hero/Title/Title";

import HeroScrapingCodeLoading from "./Loading/Loading";
import Code from "@/components/ui/code";

const URL = {
  value: "https://example.com",
  encrypted: "h=t*A:!/z!aap?A-cZz",
};
const MARKDOWN = {
  value: "# Getting Started...",
  encrypted: "# ?0z-ang S*a-Z-a0*9",
};
const TITLE = {
  value: "Guide",
  encrypted: "G!=*?",
};
const SCREENSHOT = {
  value: "https://example.com/hero",
  encrypted: "ht-=*:/?*Za!zl=-?a9?h0-!",
};

export default function HeroScrapingCode({ step }: { step: number }) {
  const [url, setUrl] = useState(URL.encrypted);
  const [markdown, setMarkdown] = useState(MARKDOWN.encrypted);
  const [title, setTitle] = useState(TITLE.encrypted);
  const [screenshot, setScreenshot] = useState(SCREENSHOT.encrypted);

  const reveal = useCallback((value: string, setter: (v: string) => void) => {
    let progress = 0;
    let increaseProgress = -10;

    const animate = () => {
      increaseProgress = (increaseProgress + 1) % 5;

      if (increaseProgress === 4) {
        progress += 0.2;
      }

      if (progress > 1) {
        progress = 1;
        setter(encryptText(value, progress, { randomizeChance: 0.3 }));

        return;
      }

      setter(encryptText(value, progress, { randomizeChance: 0.3 }));

      const interval = 70 + progress * 30;
      setTimeout(animate, interval);
    };

    animate();
  }, []);

  useEffect(() => {
    if (step >= 0 && url === URL.encrypted) reveal(URL.value, setUrl);

    if (step >= 3 && title === TITLE.encrypted) reveal(TITLE.value, setTitle);
    if (step >= 4 && markdown === MARKDOWN.encrypted)
      reveal(MARKDOWN.value, setMarkdown);

    if (step >= 5 && screenshot === SCREENSHOT.encrypted)
      reveal(SCREENSHOT.value, setScreenshot);

    const interval = setInterval(() => {
      if (step < 0) {
        URL.encrypted = encryptText(URL.value, 0, { randomizeChance: 0.3 });
        setUrl(URL.encrypted);
      }

      if (step < 3) {
        TITLE.encrypted = encryptText(TITLE.value, 0, { randomizeChance: 0.3 });
        setTitle(TITLE.encrypted);
      }

      if (step < 4) {
        MARKDOWN.encrypted = encryptText(MARKDOWN.value, 0, {
          randomizeChance: 0.3,
        });
        setMarkdown(MARKDOWN.encrypted);
      }

      if (step < 5) {
        SCREENSHOT.encrypted = encryptText(SCREENSHOT.value, 0, {
          randomizeChance: 0.3,
        });
        setScreenshot(SCREENSHOT.encrypted);
      }
    }, 70);

    return () => clearInterval(interval);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [step, reveal]);

  return (
    <div className="h-280 lg:h-310 flex z-[1] w-full relative -top-1 bg-background-base">
      <Connector className="lg:hidden absolute -top-10 -left-[10.5px]" />
      <Connector className="lg:hidden absolute -top-10 -right-[10.5px]" />
      <div className="lg:hidden absolute top-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint" />

      <Connector className="lg:hidden absolute -bottom-10 -left-[10.5px]" />
      <Connector className="lg:hidden absolute -bottom-10 -right-[10.5px]" />
      <div className="lg:hidden absolute bottom-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint" />

      <div className="flex-1 lg-max:min-w-0 h-full relative lg:inside-border before:border-border-faint">
        <CurvyRect className="overlay" allSides />
        <CurvyRect
          className="size-32 absolute bottom-0 -left-31 lg-max:hidden"
          bottomRight
        />

        <div className="pl-15 border-b border-border-faint p-13 flex justify-between items-center">
          <div className="flex gap-10 items-center">
            {Array.from({ length: 3 }).map((_, index) => (
              <div
                className="w-12 h-12 rounded-full relative inside-border before:border-border-muted"
                key={index}
              />
            ))}
          </div>

          <div className="text-mono-x-small font-mono text-black-alpha-20">
            [ .JSON ]
          </div>
        </div>

        <div className="overflow-x-scroll hide-scrollbar lg:contents relative">
          <Code
            code={`[
  {
    "url": "${url}",
    "markdown": "${markdown}",
    "json": { "title": "${title}", "docs": "..." },
    "screenshot": "${screenshot}.png"
  }
]`}
            language="json"
          />
        </div>

        <HeroScrapingCodeLoading finished={step >= 6} />
      </div>

      <div className="w-28 lg-max:hidden -ml-1 relative">
        <div className="h-1 w-[calc(100%-1px)] top-0 left-0 absolute bg-border-faint" />
        <CurvyRect className="overlay" topLeft />
      </div>

      <div className="h-53 lg-max:hidden -right-37 bottom-0 absolute w-65">
        <CurvyRect className="overlay" bottom topRight />
        <div className="overlay border-y border-border-faint" />
      </div>
    </div>
  );
}