Log In Sign Up
Models:
David Feaster
DavidFeaster/
deploy-gradio-ml-on-gcp
0
Downloads: 1
Diff of /pages/index.html [000000] .. [a72e01]

Switch to unified view

a b/pages/index.html 

  1
  
<!DOCTYPE html>





  
  

  2
  
<html lang="en">





  
  

  3
  
<head>





  
  

  4
  
    <meta charset="UTF-8">





  
  

  5
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">





  
  

  6
  
    <meta name="author" content="TobeTek">





  
  

  7
  
    <meta name="description" content="A demo ML application that provides first aid information to users built with Gradio">





  
  

  8
  
    <title>👨🏾‍⚕️Gradio & ML Demo | First Aid Web App</title>





  
  

  9
  
    <style>





  
  

  10
  
        body {





  
  

  11
  
            margin: 0;





  
  

  12
  
            padding: 0;





  
  

  13
  
            background-color: #f7b731;





  
  

  14
  
            font-family: Arial, sans-serif;





  
  

  15
  
            overflow: hidden;





  
  

  16
  
        }





  
  

  17
  





  
  

  18
  
        .container {





  
  

  19
  
            position: relative;





  
  

  20
  
            width: 100%;





  
  

  21
  
            height: 100vh;





  
  

  22
  
            display: flex;





  
  

  23
  
            align-items: center;





  
  

  24
  
            justify-content: center;





  
  

  25
  
            flex-direction: column;





  
  

  26
  
        }





  
  

  27
  





  
  

  28
  
        .app-card {





  
  

  29
  
            width: 50vw;





  
  

  30
  
            background-color: rgba(255, 255, 255, 0.9);





  
  

  31
  
            border-radius: 15px;





  
  

  32
  
            padding: 2.5rem;





  
  

  33
  
            text-align: center;





  
  

  34
  
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);





  
  

  35
  
        }





  
  

  36
  
        button#get-started {





  
  

  37
  
            color: white;





  
  

  38
  
            background-color: #e74c3c;





  
  

  39
  
            padding: 1.5rem 2.5rem;





  
  

  40
  
            font-size: x-large;





  
  

  41
  
            border-radius: 20px;





  
  

  42
  
            border: 0;





  
  

  43
  
            cursor: pointer;





  
  

  44
  
            transition: background-color ease-in, border-width 0.3s;





  
  

  45
  
        }





  
  

  46
  
        button#get-started:hover{





  
  

  47
  
            background-color: #f75745;





  
  

  48
  
            border-width: 5px;





  
  

  49
  
            border-style: dashed;





  
  

  50
  
            border-color: white;





  
  

  51
  
        }





  
  

  52
  
        h1 {





  
  

  53
  
            font-size: 36px;





  
  

  54
  
            color: #333;





  
  

  55
  
        }





  
  

  56
  





  
  

  57
  
        p {





  
  

  58
  
            font-size: 18px;





  
  

  59
  
            color: #555;





  
  

  60
  
        }





  
  

  61
  





  
  

  62
  
        .floating-elements {





  
  

  63
  
            position: absolute;





  
  

  64
  
            bottom: 10px;





  
  

  65
  
            right: 10px;





  
  

  66
  
        }





  
  

  67
  





  
  

  68
  
        .floating-circle {





  
  

  69
  
            width: 50px;





  
  

  70
  
            height: 50px;





  
  

  71
  
            background-color: #e74c3c;





  
  

  72
  
            border-radius: 50%;





  
  

  73
  
            opacity: 0.8;





  
  

  74
  
            margin: 10px;





  
  

  75
  
            animation: float 5s ease-in-out infinite;





  
  

  76
  
        }





  
  

  77
  





  
  

  78
  
        @keyframes float {





  
  

  79
  
            0%, 100% {





  
  

  80
  
                transform: translateY(0);





  
  

  81
  
            }





  
  

  82
  
            50% {





  
  

  83
  
                transform: translateY(-10px);





  
  

  84
  
            }





  
  

  85
  
        }





  
  

  86
  
    </style>





  
  

  87
  
</head>





  
  

  88
  
<body>





  
  

  89
  
    <div class="container">





  
  

  90
  
        <div class="app-card">





  
  

  91
  
            <h1>Welcome to eMLily </h1>





  
  

  92
  
            <p> A demo ML application that provides first aid information to people diagnosed with internal bleeding.</p>





  
  

  93
  
            <p><a href="/gradio"><button id="get-started">Get Started!</button></a></p>





  
  

  94
  
            <blockquote>🚧 The suggestions from the AI are not clinically accurate and exist solely for demostration purposes.</blockquote>





  
  

  95
  
            <p>Built by <a href="https://github.com/TobeTek">TobeTek</a> for the <a href="https://www.kagglex.org/">KaggleX Program</a> 🚀</p>





  
  

  96
  
            <p><a href="https://github.com/TobeTek/deploy-gradio-ml-on-gcp">Checkout the GitHub Repo for this project</a></p>





  
  

  97
  
            <p>🛠 with <a href="https://www.gradio.app/guides/quickstart">Gradio</a></p>





  
  

  98
  
            





  
  

  99
  
        </div>





  
  

  100
  
        <div class="floating-elements">





  
  

  101
  
            <div class="floating-circle"></div>





  
  

  102
  
            <div class="floating-circle"></div>





  
  

  103
  
            <div class="floating-circle"></div>





  
  

  104
  
        </div>





  
  

  105
  
    </div>





  
  

  106
  
    <script>





  
  

  107
  
        // Add JavaScript functionality here if needed





  
  

  108
  
    </script>





  
  

  109
  
</body>





  
  

  110
  
</html>