Hugging Face's logo

Spaces:
rcajegas
/
WHO_1
Running

App Files Community
rcajegas commited on
Commit
58e5a0a
·
1 Parent(s): 60d284f

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +24 -65
style.css CHANGED
@@ -1,68 +1,27 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Goals of the World Health Organization</title>
5
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected].0/dist/tf.min.js"></script>
6
- <script src="https://cdn.jsdelivr.net/npm/@huggingface/[email protected].0/dist/transformers.min.js"></script>
7
- <style>
8
- /* Set the background color and add a 3D effect */
9
- body {
10
- background-color: #2196F3;
11
- background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
12
- linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
13
- linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
14
- linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
15
- background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px;
16
- background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
17
- }
18
- /* Center the content */
19
- #content {
20
- margin: 0 auto;
21
- max-width: 800px;
22
- text-align: center;
23
- }
24
- /* Add some padding to the content */
25
- #goals {
26
- padding: 30px;
27
- }
28
- /* Add a border to the GIF */
29
- #gif {
30
- border: 5px solid white;
31
- }
32
- </style>
33
- <script>
34
- async function generateGoals() {
35
- // Load the GPT-2 model
36
- const model = await transformers.gpt2.GPT2Model.fromPretrained("gpt2");
37
 
38
- // Set up the tokenizer
39
- const tokenizer = await transformers.gpt2.GPT2Tokenizer.fromPretrained("gpt2");
 
 
 
40
 
41
- // Define the input text
42
- const input = "The goals of the World Health Organization are";
 
43
 
44
- // Encode the input text
45
- const encodedInput = tokenizer.encode(input);
46
-
47
- // Generate the output text using the GPT-2 model
48
- const output = await model.generate(tf.tensor2d(encodedInput, [1, encodedInput.length]), { maxOutputLength: 200 });
49
-
50
- // Decode the output text
51
- const decodedOutput = tokenizer.decode(output.arraySync()[0], { skipSpecialTokens: true });
52
-
53
- // Display the output text and link to the WHO website in the HTML page
54
- document.getElementById("goals").innerHTML = decodedOutput;
55
- document.getElementById("wholink").href = "https://www.who.int/about/mission/en/";
56
- }
57
- </script>
58
- </head>
59
- <body onload="generateGoals()">
60
- <div id="content">
61
- <h1>Goals of the World Health Organization</h1>
62
- <p id="goals">Loading...</p>
63
- <img id="gif" src="https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" alt="GIF design">
64
- <br>
65
- <a id="wholink" href="#">Learn more about the WHO</a>
66
- </div>
67
- </body>
68
- </html>
 
1
+ body {
2
+ background-color: skyblue;
3
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
4
+ linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
5
+ linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
6
+ linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
7
+ linear-gradient(0deg, transparent 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px, transparent 20px, transparent 30px, rgba(255, 255, 255, 0.3) 30px, rgba(255, 255, 255, 0.3) 40px, transparent 40px),
8
+ linear-gradient(0deg, transparent 10px, rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.2) 20px, transparent 20px, transparent 30px, rgba(255, 255, 255, 0.2) 30px, rgba(255, 255, 255, 0.2) 40px, transparent 40px);
9
+ background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px, 100% 40px, 100% 20px;
10
+ background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px, 0px 0px, 0px 0px;
11
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
+ #content {
14
+ margin: 0 auto;
15
+ max-width: 800px;
16
+ text-align: center;
17
+ }
18
 
19
+ #goals {
20
+ padding: 30px;
21
+ }
22
 
23
+ #gif {
24
+ border: 5px solid white;
25
+ border-radius: 10px;
26
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
27
+ }