upload project skripsi

app.py

@@ -0,0 +1,73 @@
+import numpy as np
+from flask import Flask, request, render_template, jsonify
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing import image
+from PIL import Image, ImageChops, ImageEnhance
+import io
+import base64
+
+from util import base64_to_pil
+
+app = Flask(__name__)
+
+# Load the pre-trained model
+model = load_model('model/model_vgg16_pretrained_80_100-90.h5')
+
+def perform_ela(img, scale=10):
+    ela_image = img.copy().convert('RGB')
+    ela_image.save('temp_ela.jpg', 'JPEG', quality=90)
+    ela_image = Image.open('temp_ela.jpg')
+
+    diff = ImageChops.difference(img, ela_image)
+    extrema = diff.getextrema()
+    max_diff = max([ex[1] for ex in extrema])
+    
+    scale_factor = 255.0 / max_diff
+    diff = ImageEnhance.Brightness(diff).enhance(scale_factor)
+
+    return diff
+
+def model_predict(img, model):
+    img = img.resize((128, 128))
+    x = image.img_to_array(img)
+    x = np.expand_dims(x, axis=0)  # Menambah dimensi batch
+    x = x.astype('float32') / 255.0
+    preds = model.predict(x)
+    return preds
+
+@app.route('/', methods=['GET'])
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    try:
+        if request.method == 'POST':
+            # Get the image from POST request
+            img = base64_to_pil(request.json)
+
+            # Perform ELA
+            ela_img = perform_ela(img)
+
+            # Make prediction using ELA image
+            preds = model_predict(ela_img, model)
+
+            # Konversi prediksi dari nilai probabilitas menjadi kelas (0 atau 1)
+            pred_class = np.argmax(preds, axis=1)[0]
+
+            # Lakukan pengembalian hasil prediksi
+            if pred_class == 0:
+                hasil_label = 'Manipulasi'
+            else:
+                hasil_label = 'Real'
+
+            hasil_prob = "{:.2f}".format(100 * np.max(preds))
+
+            return jsonify(result=hasil_label, probability=hasil_prob)
+        else:
+            return jsonify({'error': 'Only POST requests are accepted'})
+    except Exception as e:
+        return jsonify({'error': str(e)})
+
+if __name__ == '__main__':
+    app.run(debug=True, use_reloader=False)

requirements.txt

@@ -0,0 +1,13 @@
+click==7.1.2
+Flask==1.1.4
+gunicorn==20.0.4
+itsdangerous==1.1.0
+Jinja2==2.11.3
+MarkupSafe==1.1.1
+Werkzeug==1.0.1
+gevent==23.9.1
+grpcio==1.59.0
+h5py==3.10.0
+Pillow==10.0.1
+scikit-learn==1.3.1
+tensorflow==2.12.0

static/assets/css/main.css

@@ -0,0 +1,179 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    background-color: #f8f8f8;
+  }
+  
+  /* Global button style */
+  .button {
+    font-family: inherit;
+    text-align: center;
+    cursor: pointer;
+    border: none;
+    text-decoration: none;
+    outline: none;
+    color: #ffffff;
+    background-color: rgb(0, 120, 212);
+    padding: 0.5rem 1.2rem;
+    border-radius: 2px;
+    font-size: 1rem;
+    min-width: 6rem;
+  }
+  
+  .button:hover {
+    background-color: rgb(16, 110, 190);
+  }
+  
+  .button.disabled {
+    pointer-events: none;
+    background-color: #cccccc;
+    color: #666666;
+  }
+  
+  /* Main section */
+  
+  .main {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .main .title h3 {
+    font-size: 2.3rem;
+    font-weight: 300;
+    margin: 0.8rem 0;
+  }
+  
+  .hidden {
+    display: none;
+  }
+  
+  .reveal {
+    opacity: 0;
+  }
+  
+  .reveal:hover {
+    opacity: 0.2;
+  }
+  
+  /* Upload box */
+  .upload-box {
+    font-size: 0.8rem;
+    color: #666666;
+    cursor: pointer;
+    width: 16rem;
+    height: 10rem;
+    background: #fff;
+    border: 0.1rem dashed #838388;
+    border-radius: 0.4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: 1rem 0 2rem 0;
+  }
+  
+  .upload-box.dragover {
+    /* background-color: grey; */
+    color: #eeeeee;
+    border: 0.1rem solid rgb(0, 120, 212);
+    box-shadow: inset 0 0 0 0.1rem rgb(0, 120, 212);
+  }
+  
+  .upload-box:hover {
+    border-color: rgb(0, 120, 212);
+  }
+  
+  .upload-box #image-preview {
+    max-width: 14rem;
+    max-height: 8rem;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
+  }
+  
+  #image-result {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    max-height: 20rem;
+  }
+  
+  #image-box {
+    position: relative;
+    width: auto;
+    float: left;
+    margin-bottom: 2rem;
+  }
+  
+  #image-display {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    max-height: 20rem;
+  }
+  
+  #image-display.loading {
+    filter: brightness(30%);
+  }
+  
+  #pred-result {
+    color: white;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  #pred-probability {
+    color: white;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  #pred-probability::after {
+    content: " %";
+  }
+  
+  #loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    margin: 0 auto;
+  }
+  
+  /* Animation */
+  #spinner {
+    box-sizing: border-box;
+    stroke: #cccccc;
+    stroke-width: 3px;
+    transform-origin: 50%;
+    animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite,
+      rotate 1.6s linear infinite;
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(450deg);
+    }
+  }
+  @keyframes line {
+    0% {
+      stroke-dasharray: 2, 85.964;
+      transform: rotate(0);
+    }
+    50% {
+      stroke-dasharray: 65.973, 21.9911;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dasharray: 2, 85.964;
+      stroke-dashoffset: -65.973;
+      transform: rotate(90deg);
+    }
+  }
+  

static/assets/images/blob-dashed.svg

@@ -0,0 +1,3 @@
+<svg width="186" height="186" viewBox="0 0 186 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M136.029 16.6624C148.445 25.5111 156.115 38.8896 165.366 51.7413C174.74 64.5931 185.696 77.0234 184.965 89.1378C184.357 101.252 172.062 112.945 162.81 126.007C153.558 139.07 147.472 153.291 135.663 164.879C123.977 176.361 106.569 184.999 89.1614 184.999C71.7536 185.104 54.3457 176.361 38.0335 167.196C21.5995 157.926 6.26113 148.235 2.24394 135.172C-1.89499 122.215 5.28727 105.782 9.30446 91.4553C13.4434 77.2341 14.539 64.9091 17.4606 50.2665C20.5039 35.624 25.6167 18.6639 37.9117 9.81517C50.0851 0.861095 69.6841 0.0183531 88.0658 1.70383C106.326 3.49464 123.612 7.81367 136.029 16.6624Z" stroke="#0F051D" stroke-miterlimit="3.97115" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 4"/>
+</svg>

static/assets/images/divider-01.svg

@@ -0,0 +1 @@
+<svg width="150" height="36" viewBox="0 0 150 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6l24 24L51 6l24 24L99 6l24 24 24-24" stroke="url(#paint0_linear_131_203)" stroke-width="8"/><defs><linearGradient id="paint0_linear_131_203" x1="3" y1="18" x2="147" y2="18" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient></defs></svg>

static/assets/images/divider-02.svg

@@ -0,0 +1,9 @@
+<svg width="404" height="34" viewBox="0 0 404 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M16 13H6L0 21H16H32H42L48 13H32H16Z" fill="#A7D100"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M72 13H62L56 21H72H88H98L104 13H88H72Z" fill="#A7D100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128 13H118L112 21H128H144H154L160 13H144H128Z" fill="#A7D100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M260 13H250L244 21H260H276H286L292 13H276H260Z" fill="#A7D100"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M316 13H306L300 21H316H332H342L348 13H332H316Z" fill="#A7D100"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M372 13H362L356 21H372H388H398L404 13H388H372Z" fill="#A7D100"/>
+<path d="M202.012 0.67749V0.67749C204.004 8.73167 210.293 15.0203 218.347 17.0122V17.0122V17.0122C210.088 18.63 203.63 25.0875 202.012 33.3468V33.3468V33.3468C199.925 25.3467 193.678 19.0991 185.678 17.0122V17.0122V17.0122C193.887 15.3018 200.302 8.88717 202.012 0.67749V0.67749Z" fill="#A7D100"/>
+</svg>

static/assets/images/gradient-circle.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="url(#paint0_angular_112_288)"/><defs><radialGradient id="paint0_angular_112_288" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(48.5 18.75 -75.00008 194.0002 48.5 52.25)"><stop stop-color="#5CE8B5"/><stop offset=".342" stop-color="#7C53FF"/><stop offset=".644" stop-color="#F796FF"/><stop offset="1" stop-color="#47C4EE"/></radialGradient></defs></svg>

static/assets/images/icon-bitgo.svg

@@ -0,0 +1,20 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_184_580)">
+<circle cx="48" cy="46" r="40" fill="white"/>
+</g>
+<path d="M47.5068 50.2597C48.9447 50.283 52.0733 50.3336 52.0954 48.3266C52.1173 46.2497 49.0072 46.3136 47.5459 46.3436C47.3955 46.3467 47.2626 46.3494 47.1523 46.3494V50.2557C47.2531 50.2557 47.3726 50.2576 47.5068 50.2597Z" fill="#009FE8"/>
+<path d="M47.393 44.572C48.5519 44.6111 51.2803 44.7032 51.3029 42.8293C51.3247 40.9286 48.7335 40.9875 47.5111 41.0154C47.3845 41.0183 47.2725 41.0209 47.1797 41.0209V44.5654C47.2426 44.567 47.3141 44.5694 47.393 44.572Z" fill="#009FE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.8158 39.5258C63.8158 58.7676 48.4079 64 48.4079 64C48.4079 64 33 58.7676 33 39.5258V32.6055C33 31.858 33.5787 31.2311 34.3262 31.1829C37.1232 31.0623 43.7542 30.4836 48.4079 28C53.0616 30.4836 59.6926 31.0623 62.4896 31.1829C63.2371 31.2311 63.8158 31.858 63.8158 32.6055V39.5258ZM50.361 39.0194C52.6517 39.2364 54.4361 39.9598 54.6289 42.0576C54.7736 43.6008 54.1226 44.517 53.0857 44.9994C54.7736 45.4092 55.8105 46.4461 55.5934 48.6886C55.304 51.4856 53.2304 52.233 50.2405 52.3777V55.3195H48.4561V52.426C47.998 52.426 47.5157 52.426 47.0335 52.4019V55.3195H45.2732V52.3777C44.8634 52.3536 42.0422 52.3777 42.0422 52.3777L42.0663 50.2318H44.0677V40.852H41.8011V38.9953C41.8011 38.9953 44.984 38.9711 45.3697 38.9711L45.3456 36.0536H47.1299V38.9229H48.5767V36.0777H50.361V39.0194Z" fill="#009FE8"/>
+<defs>
+<filter id="filter0_d_184_580" x="0" y="0" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_184_580"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_184_580" result="shape"/>
+</filter>
+</defs>
+</svg>

static/assets/images/icon-coinbase.svg

@@ -0,0 +1 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_184_564)"><circle cx="48" cy="46" r="40" fill="#fff"/></g><rect x="30" y="28" width="35.532" height="36" rx="17.766" fill="#0052FF"/><path d="M47.962 39.251c2.73 0 4.915 1.639 5.695 4.135h5.462c-1.014-5.305-5.384-8.972-11.157-8.972-6.476.078-11.548 4.993-11.548 11.625s4.994 11.547 11.625 11.547c5.618 0 10.066-3.589 11.08-8.972h-5.462c-.78 2.497-2.965 4.213-5.617 4.213-3.746 0-6.398-2.887-6.398-6.788 0-3.901 2.574-6.788 6.32-6.788z" fill="#fff"/><defs><filter id="filter0_d_184_564" x="0" y="0" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_184_564"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_184_564" result="shape"/></filter></defs></svg>

static/assets/images/icon-metamask.svg

@@ -0,0 +1,46 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_184_565)">
+<circle cx="48" cy="46" r="40" fill="white"/>
+</g>
+<path d="M63.7987 30L50.3301 40.0033L52.8208 34.1015L63.7987 30Z" fill="#E2761B" stroke="#E2761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.7012 30L46.0615 40.0981L43.6927 34.1015L32.7012 30Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.9504 53.1877L55.3633 58.6835L63.0384 60.7951L65.2448 53.3096L58.9504 53.1877Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.2812 53.3096L33.4741 60.7951L41.1492 58.6835L37.5621 53.1877L31.2812 53.3096Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.7169 43.9018L38.5781 47.1369L46.1991 47.4754L45.9283 39.2859L40.7169 43.9018Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7833 43.9018L50.5041 39.1912L50.3281 47.4754L57.9355 47.137L55.7833 43.9018Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.1484 58.6835L45.7237 56.45L41.7711 53.3638L41.1484 58.6835Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.7734 56.45L55.3622 58.6835L54.726 53.3638L50.7734 56.45Z" fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.3642 58.6832L50.7754 56.4497L51.1409 59.4412L51.1003 60.7001L55.3642 58.6832Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.1523 58.6832L45.4163 60.7001L45.3892 59.4412L45.7276 56.4497L41.1523 58.6832Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45.4852 51.3875L41.668 50.264L44.3617 49.0322L45.4852 51.3875Z" fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.0195 51.3875L52.143 49.0322L54.8503 50.264L51.0195 51.3875Z" fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.1535 58.6837L41.8033 53.188L37.5664 53.3098L41.1535 58.6837Z" fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54.7168 53.188L55.3665 58.6837L58.9537 53.3098L54.7168 53.188Z" fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57.9375 47.1372L50.3301 47.4756L51.034 51.3876L52.1575 49.0323L54.8647 50.2641L57.9375 47.1372Z" fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.6683 50.2641L44.3756 49.0323L45.4855 51.3876L46.203 47.4756L38.582 47.1372L41.6683 50.2641Z" fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.582 47.1372L41.7766 53.3639L41.6683 50.2641L38.582 47.1372Z" fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54.8678 50.2641L54.7324 53.3639L57.9405 47.1372L54.8678 50.2641Z" fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.2018 47.4756L45.4844 51.3876L46.3778 56.0035L46.5808 49.9257L46.2018 47.4756Z" fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.3303 47.4756L49.9648 49.9121L50.1273 56.0035L51.0342 51.3876L50.3303 47.4756Z" fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.0339 51.3874L50.127 56.0033L50.7767 56.45L54.7293 53.3637L54.8647 50.2639L51.0339 51.3874Z" fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.668 50.2639L41.7763 53.3637L45.7289 56.45L46.3786 56.0033L45.4852 51.3874L41.668 50.2639Z" fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.1015 60.7005L51.1421 59.4416L50.8037 59.1438H45.7005L45.3892 59.4416L45.4163 60.7005L41.1523 58.6836L42.6413 59.9019L45.6599 62H50.8443L53.8765 59.9019L55.3655 58.6836L51.1015 60.7005Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.7761 56.4501L50.1264 56.0034H46.3768L45.7271 56.4501L45.3887 59.4416L45.7 59.1438H50.8032L51.1416 59.4416L50.7761 56.4501Z" fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M64.3678 40.6531L65.5184 35.1303L63.7993 30L50.7773 39.6649L55.7858 43.9018L62.8653 45.9728L64.4355 44.1454L63.7587 43.6581L64.8416 42.67L64.0023 42.0202L65.0852 41.1945L64.3678 40.6531Z" fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31 35.1303L32.1506 40.6531L31.4196 41.1945L32.5025 42.0202L31.6768 42.67L32.7597 43.6581L32.0829 44.1454L33.6396 45.9728L40.7191 43.9018L45.7275 39.6649L32.7056 30L31 35.1303Z" fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.8638 45.9732L55.7843 43.9021L57.9366 47.1373L54.7285 53.364L58.9518 53.3098H65.2462L62.8638 45.9732Z" fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.72 43.9021L33.6405 45.9732L31.2852 53.3098H37.566L41.7758 53.364L38.5812 47.1373L40.72 43.9021Z" fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.3301 47.4757L50.7768 39.6652L52.8343 34.1018H43.6973L45.7277 39.6652L46.2015 47.4757L46.3639 49.9393L46.3775 56.0036H50.127L50.1541 49.9393L50.3301 47.4757Z" fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_d_184_565" x="0" y="0" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_184_565"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_184_565" result="shape"/>
+</filter>
+</defs>
+</svg>

static/assets/images/icon-trustwallet.svg

@@ -0,0 +1 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_184_566)"><circle cx="48" cy="46" r="40" fill="#fff"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M53.913 28H42.087C35.412 28 30 33.412 30 40.087v11.826C30 58.588 35.412 64 42.087 64h11.826C60.588 64 66 58.588 66 51.913V40.087C66 33.412 60.588 28 53.913 28zm-6.746 6.681a1.768 1.768 0 012.267 0c2.701 2.256 5.783 2.241 7.049 2.235h.17a1.769 1.769 0 011.769 1.795c-.06 4.022-.222 6.928-.545 9.078-.324 2.148-.83 3.714-1.705 4.93-.883 1.227-2.014 1.909-3.1 2.51l-.584.318c-.942.51-1.95 1.058-3.156 1.923a1.769 1.769 0 01-2.062 0c-1.206-.865-2.212-1.411-3.153-1.922l-.005-.002c-.196-.107-.389-.212-.58-.318-1.087-.6-2.216-1.283-3.098-2.511-.872-1.215-1.377-2.781-1.7-4.928-.321-2.15-.482-5.056-.543-9.078a1.768 1.768 0 011.769-1.796h.168c1.256.007 4.338.022 7.039-2.234zm1.13 3.56c-2.4 1.587-4.868 2.042-6.537 2.168.078 3.056.229 5.244.47 6.855.286 1.907.675 2.833 1.075 3.39.39.543.908.91 1.936 1.479.163.09.338.185.523.285.707.383 1.563.848 2.534 1.476.972-.63 1.83-1.094 2.538-1.478h.002l.02-.012c.176-.095.343-.185.5-.272 1.029-.569 1.549-.936 1.94-1.48.4-.556.791-1.483 1.078-3.389.242-1.61.394-3.798.471-6.854-1.672-.125-4.145-.578-6.55-2.169z" fill="#009FE8"/><defs><filter id="filter0_d_184_566" x="0" y="0" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_184_566"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_184_566" result="shape"/></filter></defs></svg>

static/assets/images/logo/python.svg

@@ -0,0 +1 @@
+<svg height="255" preserveAspectRatio="xMidYMid" viewBox="0 0 256 255" width="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="12.959359%" x2="79.638833%" y1="12.039393%" y2="78.200854%"><stop offset="0" stop-color="#387eb8"/><stop offset="1" stop-color="#366994"/></linearGradient><linearGradient id="b" x1="19.127525%" x2="90.741533%" y1="20.579181%" y2="88.429037%"><stop offset="0" stop-color="#ffe052"/><stop offset="1" stop-color="#ffc331"/></linearGradient><path d="m126.915866.07227555c-64.8322829.00000462-60.7837372 28.11518925-60.7837372 28.11518925l.0722755 29.1270467h61.8678717v8.7453417h-86.4415589s-41.486166-4.7049094-41.486166 60.7114618c-.00000463 65.416358 36.2100508 63.096556 36.2100508 63.096556h21.6103896v-30.355731s-1.1648552-36.210051 35.6318464-36.210051h61.3619421s34.475438.557297 34.475438-33.3190286v-56.0135516c0-.0000047 5.234323-33.89723325-62.518352-33.89723325zm-34.1140591 19.58667415c6.1553999-.0000045 11.1304351 4.9750349 11.1304351 11.1304348.000004 6.1553999-4.9750352 11.1304348-11.1304351 11.1304348-6.1553999.0000046-11.1304348-4.9750349-11.1304348-11.1304348-.0000047-6.1553999 4.9750349-11.1304348 11.1304348-11.1304348z" fill="url(#a)"/><path d="m128.757101 254.126271c64.832302 0 60.783738-28.11519 60.783738-28.11519l-.072275-29.127046h-61.867872v-8.745342h86.441559s41.486166 4.704896 41.486166-60.711485c.000023-65.4163514-36.210051-63.0965491-36.210051-63.0965491h-21.61039v30.3557243s1.164874 36.2100508-35.631846 36.2100508h-61.361948s-34.475437-.557296-34.475437 33.319052v56.013552s-5.2343225 33.897233 62.518356 33.897233zm34.114059-19.586674c-6.155401 0-11.130434-4.975033-11.130434-11.130435 0-6.155403 4.975033-11.130435 11.130434-11.130435 6.155403 0 11.130435 4.975032 11.130435 11.130435.000023 6.155402-4.975032 11.130435-11.130435 11.130435z" fill="url(#b)"/></svg>

static/assets/images/logo/tensorflow.svg

@@ -0,0 +1 @@
+<svg height="274" preserveAspectRatio="xMidYMid" viewBox="0 0 256 274" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m145.726081 42.0651946v42.0695473l72.860871 42.0695701v-42.0695701zm-145.7260812 42.0695473v42.0695701l36.430424 21.030443v-42.065228zm109.2912942 21.0347851-36.4304239 21.034785v126.200004l36.4304239 21.034785v-84.134798l36.434787 21.034785v-42.069548l-36.434787-21.034785z" fill="#e55b2d"/><path d="m145.726081 42.0651946-109.2956572 63.1043324v42.065228l72.8608702-42.065228v42.065228l36.434787-21.030443zm109.295636 21.0347848-36.434765 21.0347625v42.0695701l36.434765-21.034785zm-72.865212 84.1347756-36.430424 21.034785v42.069548l36.430424-21.034785zm-36.430424 63.104333-36.434787-21.034785v84.134798l36.434787-21.034785z" fill="#ed8e24"/><path d="m145.726081-.00003419-145.7260812 84.13477609 36.430424 21.0347851 109.2956572-63.1043324 72.860871 42.0695473 36.434765-21.0347625zm0 126.20434619-36.434787 21.030443 36.434787 21.034785 36.430424-21.034785z" fill="#f8bf3c"/></svg>

static/assets/images/logo/visual-studio-code.svg

@@ -0,0 +1 @@
+<svg height="254" preserveAspectRatio="xMidYMid" viewBox="0 0 256 254" width="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="50.000048%" x2="50.000048%" y1="0%" y2="99.999921%"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><mask id="b" fill="#fff"><path d="m180.82764 252.605272c4.016311 1.564887 8.59642 1.46428 12.650584-.486102l52.500918-25.262319c5.516451-2.65463 9.024747-8.238817 9.024747-14.363891v-171.2957755c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938l-52.500918-25.26330519c-5.320218-2.55994222-11.546895-1.93291555-16.215658 1.46166039-.667393.48492576-1.302911 1.02635082-1.898584 1.62302008l-100.5073927 91.69447842-43.7787891-33.2316887c-4.0753805-3.0935159-9.7757136-2.8401058-13.5607284.6029448l-14.04129121 12.772607c-4.62980482 4.2115486-4.63511408 11.4951968-.01146521 15.713519l37.96644362 34.6372985-37.96644362 34.637696c-4.62364887 4.218521-4.61833961 11.50207.01146521 15.713619l14.04129121 12.772109c3.7850148 3.443548 9.4853479 3.69656 13.5607284.603642l43.7787891-33.232187 100.5073927 91.694817c1.58979 1.590786 3.456498 2.789105 5.463658 3.571051zm10.464124-183.6493202-76.262101 57.8885732 76.262101 57.888871z" fill="#fff"/></mask><path d="m246.134784 26.873337-52.541759-25.29809927c-6.081245-2.92824355-13.349852-1.69304554-18.123206 3.07990911l-172.00340183 156.82707416c-4.62645789 4.218521-4.62113867 11.50207.01147518 15.713619l14.04978805 12.772109c3.7874054 3.443548 9.4912249 3.69656 13.5689961.603642l207.1319905-157.1352905c6.948856-5.2716078 16.929868-.3153681 16.929868 8.4069603v-.6100172c0-6.1225836-3.5073-11.7038817-9.023751-14.3599066z" fill="#0065a9" mask="url(#b)"/><path d="m246.134784 226.816011-52.541759 25.298179c-6.081245 2.927564-13.349852 1.692389-18.123206-3.079969l-172.00340183-156.8271937c-4.62645789-4.2182226-4.62113867-11.50207.01147518-15.7135191l14.04978805-12.772607c3.7874054-3.4430506 9.4912249-3.6965603 13.5689961-.6029447l207.1319905 157.1346925c6.948856 5.271409 16.929868.315767 16.929868-8.407159v.610614c0 6.122086-3.5073 11.703284-9.023751 14.359907z" fill="#007acc" mask="url(#b)"/><path d="m193.428324 252.134497c-6.083238 2.925572-13.351845 1.689401-18.125199-3.083953 5.881028 5.881027 15.937743 1.715299 15.937743-6.60221v-231.1753717c0-8.31753961-10.056715-12.48301323-15.937743-6.60160249 4.773354-4.77339792 12.041961-6.01033911 18.125199-3.08468047l52.532793 25.26333506c5.520436 2.6546304 9.030724 8.2379207 9.030724 14.3631938v171.2960748c0 6.125074-3.510288 11.708265-9.030724 14.362895z" fill="#1f9cf0" mask="url(#b)"/><path d="m180.827889 252.605272c4.016311 1.563891 8.59642 1.46428 12.649587-.486102l52.500919-25.263315c5.517447-2.65463 9.025743-8.237821 9.025743-14.362895v-171.2959747c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938l-52.501915-25.26326537c-5.319221-2.55994919-11.545898-1.93292252-16.215657 1.46165043-.666397.48492576-1.301915 1.02635082-1.898584 1.62302008l-100.5066955 91.69444856-43.7787891-33.2316887c-4.0752809-3.093516-9.7757136-2.8400062-13.5607284.6029447l-14.0412414 12.772607c-4.62980483 4.2115487-4.63511409 11.4952965-.01146521 15.7136187l37.96649341 34.6373981-37.96649341 34.637696c-4.62364888 4.218521-4.61833962 11.50207.01146521 15.713619l14.0412414 12.772109c3.7850148 3.443548 9.4854475 3.69656 13.5607284.603642l43.7787891-33.232187 100.5066955 91.694817c1.58979 1.590786 3.457494 2.789105 5.464654 3.571051zm10.464124-183.6495194-76.262101 57.8887724 76.262101 57.888871z" fill="url(#a)" fill-opacity=".25" mask="url(#b)"/></svg>

static/assets/images/nerko-dark.svg

@@ -0,0 +1,7 @@
+<svg width="128" height="38" viewBox="0 0 128 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.952 36.96V10.56H0V36.96H6.864V17.136H17.088V36.96H23.952Z" fill="white"/>
+<path d="M40.7944 9.984C33.0184 9.984 27.1624 15.936 27.1624 23.808C27.1624 31.632 32.9704 37.584 40.9864 37.584C47.4184 37.584 53.1304 33.744 54.2344 27.264H47.1304C46.5064 30.144 43.9624 31.728 41.0344 31.728C37.1944 31.728 34.4104 29.136 34.1704 25.056H54.2824C54.3784 24.24 54.4744 23.184 54.2824 21.792C53.4664 14.592 47.6104 9.984 40.7944 9.984ZM40.8904 15.648C43.6744 15.648 46.4584 17.232 47.0824 20.496H34.6504C35.4664 17.52 37.8184 15.648 40.8904 15.648Z" fill="white"/>
+<path d="M73.5536 17.136V10.56H57.4256V36.96H64.2896V17.136H73.5536Z" fill="white"/>
+<path d="M82.6665 21.024V0H75.8025V36.96H82.6665V25.968L91.9305 36.96H100.618L89.0985 23.28L99.7065 10.56H91.1145L82.6665 21.024Z" fill="white"/>
+<path d="M113.46 9.984C105.876 9.984 99.6836 15.84 99.6836 23.76C99.6836 31.68 105.78 37.584 113.46 37.584C121.14 37.584 127.188 31.728 127.188 23.808C127.188 15.84 121.044 9.984 113.46 9.984ZM113.46 16.512C117.3 16.512 120.276 19.488 120.276 23.808C120.276 28.128 117.3 31.056 113.46 31.056C109.668 31.056 106.644 28.128 106.644 23.808C106.644 19.44 109.62 16.512 113.46 16.512Z" fill="white"/>
+</svg>

static/assets/images/nerko-icon.svg

@@ -0,0 +1,10 @@
+<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.928164" y="16.9725" width="64" height="64" rx="16" transform="rotate(-15 0.928164 16.9725)" fill="url(#paint0_linear_124_293)"/>
+<path d="M55.1043 49.2506L48.2715 23.7501L25.1357 29.9493L31.9685 55.4498L38.5986 53.6732L33.4678 34.5247L43.3434 31.8786L48.4742 51.0271L55.1043 49.2506Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_124_293" x1="3.80816" y1="81.3726" x2="64.8082" y2="21.8726" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3754FB"/>
+<stop offset="1" stop-color="#FC01FF"/>
+</linearGradient>
+</defs>
+</svg>

static/assets/images/nerko-light.svg

@@ -0,0 +1 @@
+<svg width="128" height="38" viewBox="0 0 128 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.952 36.96v-26.4H0v26.4h6.864V17.136h10.224V36.96h6.864zM40.794 9.984c-7.776 0-13.632 5.952-13.632 13.824 0 7.824 5.808 13.776 13.824 13.776 6.432 0 12.144-3.84 13.248-10.32H47.13c-.624 2.88-3.168 4.464-6.096 4.464-3.84 0-6.624-2.592-6.864-6.672h20.112c.096-.816.192-1.872 0-3.264-.816-7.2-6.672-11.808-13.488-11.808zm.096 5.664c2.784 0 5.568 1.584 6.192 4.848H34.65c.816-2.976 3.168-4.848 6.24-4.848zm32.664 1.488V10.56H57.426v26.4h6.864V17.136h9.264zm9.112 3.888V0h-6.864v36.96h6.864V25.968L91.93 36.96h8.688l-11.52-13.68 10.609-12.72h-8.592l-8.448 10.464z" fill="#0F051D"/><path d="M113.46 9.984c-7.584 0-13.776 5.856-13.776 13.776s6.096 13.824 13.776 13.824 13.728-5.856 13.728-13.776c0-7.968-6.144-13.824-13.728-13.824zm0 6.528c3.84 0 6.816 2.976 6.816 7.296s-2.976 7.248-6.816 7.248c-3.792 0-6.816-2.928-6.816-7.248 0-4.368 2.976-7.296 6.816-7.296z" fill="#0F051D"/></svg>

static/assets/images/nerko.svg

@@ -0,0 +1 @@
+<svg width="139" height="39" viewBox="0 0 139 39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.435 37.88v-26.4H.483v26.4h6.864V18.056h10.224V37.88h6.864z" fill="url(#paint0_linear_112_287)"/><path d="M41.278 10.904c-7.776 0-13.632 5.952-13.632 13.824 0 7.824 5.808 13.776 13.824 13.776 6.432 0 12.144-3.84 13.248-10.32h-7.104c-.624 2.88-3.168 4.464-6.096 4.464-3.84 0-6.624-2.592-6.864-6.672h20.112c.096-.816.192-1.872 0-3.264-.816-7.2-6.672-11.808-13.488-11.808zm.096 5.664c2.784 0 5.568 1.584 6.192 4.848H35.134c.816-2.976 3.168-4.848 6.24-4.848z" fill="url(#paint1_linear_112_287)"/><path d="M74.037 18.056V11.48H57.909v26.4h6.864V18.056h9.264z" fill="url(#paint2_linear_112_287)"/><path d="M83.15 21.944V.92h-6.864v36.96h6.864V26.888l9.264 10.992h8.688L89.582 24.2l10.608-12.72h-8.592L83.15 21.944z" fill="url(#paint3_linear_112_287)"/><path d="M113.943 10.904c-7.584 0-13.776 5.856-13.776 13.776s6.096 13.824 13.776 13.824 13.728-5.856 13.728-13.776c0-7.968-6.144-13.824-13.728-13.824zm0 6.528c3.84 0 6.816 2.976 6.816 7.296s-2.976 7.248-6.816 7.248c-3.792 0-6.816-2.928-6.816-7.248 0-4.368 2.976-7.296 6.816-7.296z" fill="url(#paint4_linear_112_287)"/><path d="M134.245 30.344c-2.448 0-4.272 1.728-4.272 4.08 0 2.352 1.824 4.08 4.272 4.08 2.448 0 4.272-1.728 4.272-4.08 0-2.352-1.824-4.08-4.272-4.08z" fill="url(#paint5_linear_112_287)"/><defs><linearGradient id="paint0_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient><linearGradient id="paint1_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient><linearGradient id="paint2_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient><linearGradient id="paint3_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient><linearGradient id="paint4_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient><linearGradient id="paint5_linear_112_287" x1="6.695" y1="38.739" x2="25.254" y2="-27.747" gradientUnits="userSpaceOnUse"><stop stop-color="#3754FB"/><stop offset="1" stop-color="#FC01FF"/></linearGradient></defs></svg>

static/assets/images/objects/circle-01.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="#CFD2DD"/></svg>

static/assets/images/objects/circle-02.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.252 36.68c9.529 0 17.253-7.723 17.253-17.252 0-9.528-7.725-17.252-17.253-17.252S2 9.9 2 19.428c0 9.529 7.724 17.253 17.252 17.253zm0 2c10.633 0 19.253-8.619 19.253-19.252 0-10.632-8.62-19.252-19.253-19.252C8.62.176 0 8.796 0 19.43c0 10.63 8.62 19.25 19.252 19.25z" fill="#1F2128"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.252 36.68c9.529 0 17.253-7.723 17.253-17.252 0-9.528-7.725-17.252-17.253-17.252S2 9.9 2 19.428c0 9.529 7.724 17.253 17.252 17.253zm0 2c10.633 0 19.253-8.619 19.253-19.252 0-10.632-8.62-19.252-19.253-19.252C8.62.176 0 8.796 0 19.43c0 10.63 8.62 19.25 19.252 19.25z" fill="#fff" fill-opacity=".45"/></svg>

static/assets/images/objects/square-round.svg

@@ -0,0 +1 @@
+<svg width="100" height="93" viewBox="0 0 100 93" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M70.708 5.271l-64.72 23.95 17.356 46.901c3.642 9.842 14.572 14.867 24.413 11.225l46.901-17.356-23.95-64.72zM.848 26.858l18.745 50.653C24 89.424 37.233 95.507 49.146 91.099l50.652-18.745L73.07.133.85 26.858z" fill="#1F2128"/></svg>

static/assets/images/objects/star-01.svg

@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 0L38.3525 7.48378C42.2735 19.957 52.043 29.7265 64.5162 33.6475L72 36L64.9929 38.1069C52.2502 41.9385 42.247 51.8557 38.3057 64.5649L36 72L33.9349 65.0382C30.0861 52.063 19.937 41.9139 6.96177 38.0651L-4.05679e-06 36L7.48378 33.6475C19.957 29.7265 29.7265 19.957 33.6475 7.48378L36 0Z" fill="#545C78"/>
+</svg>

static/assets/images/objects/star-02.svg

@@ -0,0 +1 @@
+<svg width="94" height="94" viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M47 0l4.585 23.951L64.986 3.578l-4.93 23.883 20.178-13.695L66.54 33.944l23.882-4.93L70.05 42.415 94 47l-23.951 4.585 20.373 13.401-23.882-4.93 13.694 20.178L60.056 66.54l4.93 23.882L51.585 70.05 47 94l-4.585-23.951-13.401 20.373 4.93-23.882-20.178 13.694L27.46 60.056l-23.882 4.93L23.95 51.585 0 47l23.951-4.585L3.578 29.014l23.883 4.93-13.695-20.178L33.944 27.46l-4.93-23.882L42.415 23.95 47 0z" fill="#CFD2DD"/></svg>

static/assets/js/app-head.js

@@ -0,0 +1 @@
+const ENABLE_PAGE_REVEALER=!0,ENABLE_PAGE_PRELOADER=!1,breakpoints={xs:480,s:640,m:960,l:1200,xl:1600};{const e=document.documentElement,t=(t,n,a="min")=>{const o=matchMedia(`(${a}-width: ${n}px)`),s=()=>{const n="bp-"+t+("max"===a?"-max":"");o.matches?e.classList.add(n):e.classList.remove(n)};o.onchange=s,s()};Object.entries(breakpoints).forEach((([e,n])=>{t(e,n,"min"),t(e,n-1,"max")}))}document.addEventListener("DOMContentLoaded",(()=>{document.documentElement.classList.add("dom-ready")}));const isDarkMode=()=>document.documentElement.classList.contains("uk-dark"),setDarkMode=(e=!0)=>{document.documentElement.classList.contains("uk-dark")!==e&&(e?document.documentElement.classList.add("uk-dark"):document.documentElement.classList.remove("uk-dark"),window.dispatchEvent(new CustomEvent("darkmodechange")))};localStorage.getItem("darkMode")?setDarkMode("1"===localStorage.getItem("darkMode")):window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&setDarkMode(!0);const ENABLE_PAGE_REVEALER_USED="show"===localStorage.getItem("page-revealer");{const e="cubic-bezier(0.8, 0, 0.2, 1)",t=1.1;{const e=document.createElement("style");e.append("\n            .page-revealer {\n                pointer-events: none;\n                visibility: hidden;\n                height: 100%;\n                width: 100%;\n                position: fixed;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                transform: scaleY(0);\n                z-index: 12000;\n                background-color: #fff;\n            }\n            .uk-dark .page-revealer {\n                background-color: #090909;\n            }\n        "),document.head.append(e)}const n=document.createElement("div");n.classList.add("page-revealer"),document.documentElement.append(n),window.addEventListener("pageshow",(()=>{n.style.visibility="",n.style.transform="",n.style.transformOrigin=""})),ENABLE_PAGE_REVEALER_USED&&(async()=>{localStorage.removeItem("page-revealer"),n.style.transition="",n.style.visibility="visible",n.style.transform="scaleY(1)",n.style.transformOrigin="center bottom",await new Promise((e=>document.addEventListener("DOMContentLoaded",e))),await new Promise((e=>requestAnimationFrame(e))),n.style.transition="transform "+t+"s "+e,n.style.transform="scaleY(0)",n.style.transformOrigin="center top",await new Promise((e=>setTimeout(e,1100*t))),n.style.visibility="",n.style.transform="",n.style.transformOrigin=""})();const a=e=>{if(!(location.protocol===e.protocol&&location.origin===e.origin))return!1;if("_blank"===e.target)return!1;if(!(location.pathname===e.pathname&&location.search===e.search))return!0;return!(e.hash||e.href!==e.origin+e.pathname+e.search+e.hash)};document.addEventListener("click",(async o=>{const s=o.target.closest("a");s&&s instanceof HTMLAnchorElement&&!o.defaultPrevented&&a(s)&&(o.preventDefault(),n.style.transition="transform "+t+"s "+e,n.style.visibility="visible",n.style.transform="scaleY(1)",n.style.transformOrigin="center bottom",await new Promise((e=>setTimeout(e,1e3*t))),localStorage.setItem("page-revealer","show"),location.href=s.href)}))}

static/assets/js/helpers/anime-helper.js

@@ -0,0 +1 @@
+{const e="undefined"!=typeof jQuery?jQuery:null,{typesTesters:t,typesParsers:n}=dataAttrHelpers,r=(e,r)=>{const o={};for(const a of e.split(";")){const e=a.trim().match(/^(.*?):([\s\S]*)$/);if(!e)continue;let[s,l]=[e[1],e[2]].map((e=>e.trim()));i[s]&&(s=i[s]);for(const e in r)if(r[e].includes(s)&&t[e](l)){l=n[e](l);break}"string"==typeof l&&/^(\[|\{|anime\.|"|')/.test(l)&&(l=new Function(`return (${l})`)());const c=s.split("-");let g=o;c.forEach(((e,t)=>{t<c.length-1?(g[e]=g[e]||{},g=g[e]):g[e]=l}))}return o},o={string:["targets","onscroll","onscroll-target"],number:["onview"],boolean:["loop","onclick","onview","autoplay","onscroll","onscroll-target","onscroll-pen"]},i={onscroll:"onscroll-target","onscroll-trigger":"onscroll-triggerHook"},a=(e,t,n="restart")=>{if("alternate"===n)e.animeToggleOpen?t.reversed||t.reverse():t.reversed&&t.reverse(),e.animeToggleOpen=!e.animeToggleOpen,t.play();else if("restart"===n)t.restart();else{if("reset"!==n)throw"invalid direction";t.reset()}},s=new Promise((e=>{document.addEventListener("DOMContentLoaded",(t=>{setTimeout((()=>{e(!0)}),1300)}))})),l=async(t,n,r)=>{const o=(e="restart")=>{a(t,r,e)};let i=!1!==n.autoplay;if(n.onclick){const e="alternate"===n.onclick;t.addEventListener("click",(t=>{t.preventDefault(),o(e?"alternate":"restart")})),i=!1}if(n.onscroll){const e="boolean"==typeof n.onscroll?{triggerElement:t}:n.onscroll;e.target&&(e.triggerElement=e.target,delete e.target);const o=new ScrollMagic.Controller({...e.controller||{}}),a=e.pen;delete e.controller,delete e.pen;const s=e||{},l=s.triggerElement?"string"==typeof s.triggerElement?document.querySelector(s.triggerElement):s.triggerElement:t;delete s.triggerElement;const c=new ScrollMagic.Scene({triggerElement:l,duration:"100%",triggerHook:1,...s});if(a){const e=!0===a?l:document.querySelector(a);c.setPin(e)}c.on("progress",(e=>{r.seek(e.progress*r.duration)})).addTo(o),delete n.onscroll,i=!1}if(n.onhover&&(e(t).on("mouseenter mouseleave",(()=>{o("alternate")})),i=!1),await s,void 0!==n.onview&&!1!==n.onview){const e="number"==typeof n.onview?n.onview:0,r=()=>{window.innerHeight>t.getBoundingClientRect().top-e&&(window.removeEventListener("scroll",r),window.removeEventListener("resize",r),o())};window.addEventListener("scroll",r),window.addEventListener("resize",r),r(),i=!1}if(n.media){const e="string"==typeof n.media?[n.media]:n.media,t=[];for(let n=0;n<e.length;n++){const r=e[n];(n%2==0?t[n/2]=[]:t[(n-1)/2]).push({bp:r,type:n%2==0?"min":"max"})}const r=t.map((e=>"("+e.map((({bp:e,type:t})=>{const n=breakpoints[e]||0;return`(${t}-width: ${"max"===t?n-1:n}px)`})).join(" and ")+")")).join(" or "),a=matchMedia(r),s=()=>{o(a.matches?"restart":"reset")};a.onchange=s,s(),i=!1}i&&o()},c=async t=>{const n=r(t.getAttribute("data-anime")||"",o),i=n.targets?[...e(n.targets,t)]:t;let a;if(Object.assign(n,{targets:i}),n.timeline){const e=n.timeline;delete n.timeline,g[e]||(d[e]||(d[e]=new Promise((t=>{m[e]=t}))),await d[e]),a=g[e](t,n)}else a=anime(n);a.pause(),t.animeInstance=a,l(t,n,a)},g={},d={},m={},p=(e,t)=>{g[e]=t,m[e]&&m[e](t)};Object.assign(window,{defineAnimeTimelineHelper:p});const u=async t=>{const n=t.getAttribute("data-anime-toggle")||"";t.addEventListener("click",(t=>{t.preventDefault();[...e(n)].forEach((e=>{const t=e.animeTimelineInstance||e.animeInstance;t&&a(e,t,"alternate")}))}))};dataAttrHelpers.watchDataAttr("data-anime",c),dataAttrHelpers.watchDataAttr("data-anime-toggle",u)}

static/assets/js/helpers/data-attr-helper.js

@@ -0,0 +1 @@
+const dataAttrHelpers=(()=>{const t={string:t=>!0,number:t=>/^-?\d+(\.\d+)?$/.test(t),boolean:t=>"false"===t||"true"===t},e={string:t=>t,number:t=>parseFloat(t),boolean:t=>"false"!==t};return{typesTesters:t,typesParsers:e,watchDataAttr:(t,e)=>{const r=r=>{if(!r.hasAttribute(t))return;const s="--data-attr-"+t+"--";r[s]||(r[s]=!0,e(r))};document.querySelectorAll("["+t+"]").forEach(r);new MutationObserver((e=>{for(const s of e)s.target instanceof Element&&(r(s.target),s.target.querySelectorAll("["+t+"]").forEach(r))})).observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:[t]})},parseDataAttr:(r,s={})=>{const a={};for(const o of r.split(";")){const r=o.trim().match(/^(.*?):([\s\S]*)$/);if(!r)continue;let[n,c]=[r[1],r[2]].map((t=>t.trim()));for(const r in s)if(s[r].includes(n)&&t[r](c)){c=e[r](c);break}a[n]=c}return a}}})();

static/assets/js/helpers/swiper-helper.js

@@ -0,0 +1 @@
+{const e="undefined"!=typeof jQuery?jQuery:null,t=window.Swiper,n={boolean:{test:e=>"true"===e||"false"===e,convert:e=>"false"!==e,items:["centeredSlides","pagination-clickable","observer","observeParents","freeMode","watchSlidesVisibility","watchSlidesProgress","loop","centeredSlidesBounds","autoplay-disableOnInteraction","autoHeight","fraction-zeros","cssMode","fadeEffect-crossFade","mousewheel","allowTouchMove","grabCursor","freeModeMomentum"]},number:{test:e=>!isNaN(parseFloat(e)),convert:e=>parseFloat(e),items:["spaceBetween","autoplay-delay","initialSlide","slidesPerView","speed","touchRatio"]},string:{test:()=>!0,convert:e=>e,items:[]}},a={items:"slidesPerView",sets:"slidesPerGroup",center:"centeredSlides","center-bounds":"centeredSlidesBounds",gap:"spaceBetween",next:"navigation-nextEl",prev:"navigation-prevEl","disable-class":"navigation-disabledClass",active:"initialSlide",connect:"thumbs-connect",offset:"slidesOffsetAfter",dots:"pagination-el","dots-type":"pagination-type","dots-click":"pagination-clickable","auto-height":"autoHeight",autoplay:"autoplay-delay","autoplay-int":"autoplay-disableOnInteraction",fade:"fadeEffect-crossFade",free:"freeMode","free-momentum":"freeModeMomentum","grab-cursor":"grabCursor"},s="\n        gap: 48;\n        next: .swiper-next;\n        prev: .swiper-prev;\n        disable-class: uk-opacity-40;\n        dots: .swiper-dotnav;\n        dots-click: true;\n        fraction-zeros: true;\n        observer: true;\n        observeParents: true;\n        watchSlidesVisibility: true;\n        watchSlidesProgress: true;\n    ",i=(t,i,o=!1)=>{const r={};((o?s+";":"")+t).split(";").filter((e=>e.trim())).map((e=>e.split(":").map((e=>e.trim())))).forEach((([e,t])=>{a[e]&&(e=a[e]);e:for(const a in n)if(n[a].items.includes(e)&&(!n[a].test||n[a].test(t))){t=n[a].convert(t);break e}const s=e.split("-");let i=r;s.forEach(((e,n)=>{n<s.length-1?(i[e]=i[e]||{},i=i[e]):i[e]=t}))}));{let e=i.closest(r.parent||".swiper-parent");e||(e=i),r.navigation&&"object"==typeof r.navigation&&(r.navigation.nextEl&&"string"==typeof r.navigation.nextEl&&(r.navigation.nextEl=[...e.querySelectorAll(r.navigation.nextEl)]),r.navigation.prevEl&&"string"==typeof r.navigation.prevEl&&(r.navigation.prevEl=[...e.querySelectorAll(r.navigation.prevEl)])),r.pagination&&"object"==typeof r.pagination&&r.pagination.el&&"string"==typeof r.pagination.el&&(r.pagination.el=[...e.querySelectorAll(r.pagination.el)]),r.thumbs&&r.thumbs.connect&&"string"==typeof r.thumbs.connect&&(r.thumbs.connect=[...e.querySelectorAll(r.thumbs.connect)]),r.progress&&r.progress.bar&&"string"==typeof r.progress.bar&&(r.progress.bar=[...e.querySelectorAll(r.progress.bar)]),delete r.parent}if(r.progress&&r.progress.bar){const t=e(r.progress.bar);delete r.progress,r.on={init(){t.removeClass("animate"),t.removeClass("active"),t.eq(0).addClass("animate"),t.eq(0).addClass("active")},slideChangeTransitionStart(){t.removeClass("animate"),t.removeClass("active"),t.eq(0).addClass("active")},slideChangeTransitionEnd(){t.eq(0).addClass("animate")}}}if(r.fraction&&r.fraction.zeros&&r.pagination){const e=2,t="0";delete r.fraction,Object.assign(r.pagination,{formatFractionCurrent:n=>String(n).padStart(e,t),formatFractionTotal:n=>String(n).padStart(e,t)})}return r},o={xs:480,s:640,m:960,l:1200,xl:1600},r=(e,n="data-uc-swiper")=>{let a={};try{a=i(e.getAttribute(n),e,!0);for(const t in o){const n=e.getAttribute("data-uc-swiper-"+t);if(n){a.breakpoints=a.breakpoints||{};const s=o[t];a.breakpoints[s]=i(n,e)}}}catch(e){console.warn(e)}a.on||(a.on={}),a.on.init=function(e){e.$el.addClass("swiper-initialized")};const s=()=>{const n=new t(e,a);n.update(),document.addEventListener("DOMContentLoaded",(()=>n.update()),{once:!0}),window.addEventListener("load",(()=>n.update()),{once:!0})};if(a.thumbs&&a.thumbs.connect){const e=a.thumbs.connect;delete a.thumbs.connect,setTimeout((()=>{const t=e[0];t&&a.thumbs?(a.thumbs.swiper=t.swiper,a.thumbs.swiper?s():console.warn(`thumbs connect with selector "${e}" not setup!`)):console.warn(`thumbs connect with selector "${e}" not exist!`)}))}else s()},l=e=>{r(e,"data-uc-swiper")};document.addEventListener("DOMContentLoaded",(()=>{dataAttrHelpers.watchDataAttr("data-uc-swiper",l)})),Object.assign(window,{initSwiper:r})}

static/assets/js/helpers/typed-helper.js

@@ -0,0 +1 @@
+{const t=window.Typed,e={string:["stringsElement","fadeOutClass","cursorChar","attr","contentType"],number:["typeSpeed","startDelay","backSpeed","backDelay","loopCount"],boolean:["smartBackspace","shuffle","fadeOut","fadeOutDelay","loop","showCursor","autoInsertCss","bindInputFocusEvents"]},a=a=>{const n=a.cloneNode(!0);if(!(n instanceof Element))return;a.innerHTML="";const s=dataAttrHelpers.parseDataAttr(a.getAttribute("data-uc-typed")||"",e);new t(a,{stringsElement:n,...s})};dataAttrHelpers.watchDataAttr("data-uc-typed",a)}

static/assets/js/main.js

@@ -0,0 +1,154 @@
+//========================================================================
+// Drag and drop image handling
+//========================================================================
+
+var fileDrag = document.getElementById("file-drag");
+var fileSelect = document.getElementById("file-upload");
+
+// Add event listeners
+fileDrag.addEventListener("dragover", fileDragHover, false);
+fileDrag.addEventListener("dragleave", fileDragHover, false);
+fileDrag.addEventListener("drop", fileSelectHandler, false);
+fileSelect.addEventListener("change", fileSelectHandler, false);
+
+function fileDragHover(e) {
+  // prevent default behaviour
+  e.preventDefault();
+  e.stopPropagation();
+
+  fileDrag.className = e.type === "dragover" ? "upload-box dragover" : "upload-box";
+}
+
+function fileSelectHandler(e) {
+  // handle file selecting
+  var files = e.target.files || e.dataTransfer.files;
+  fileDragHover(e);
+  for (var i = 0, f; (f = files[i]); i++) {
+    previewFile(f);
+  }
+}
+
+//========================================================================
+// Web page elements for functions to use
+//========================================================================
+
+var imagePreview = document.getElementById("image-preview");
+var imageDisplay = document.getElementById("image-display");
+var uploadCaption = document.getElementById("upload-caption");
+var predResult = document.getElementById("pred-result");
+var predProbability = document.getElementById("pred-probability");
+var loader = document.getElementById("loader");
+
+//========================================================================
+// Main button events
+//========================================================================
+
+function submitImage() {
+  // action for the submit button
+  console.log("submit");
+
+  if (!imageDisplay.src || !imageDisplay.src.startsWith("data")) {
+    window.alert("Load gambar terlebih dahulu!");
+    return;
+  }
+
+  loader.classList.remove("hidden");
+  imageDisplay.classList.add("loading");
+
+  // call the predict function of the backend
+  predictImage(imageDisplay.src);
+}
+
+function clearImage() {
+  // reset selected files
+  fileSelect.value = "";
+
+  // remove image sources and hide them
+  imagePreview.src = "";
+  imageDisplay.src = "";
+  predResult.innerHTML = "";
+  predProbability.innerHTML = "";
+
+  hide(imagePreview);
+  hide(imageDisplay);
+  hide(loader);
+  hide(predResult);
+  hide(predProbability);
+  show(uploadCaption);
+
+  imageDisplay.classList.remove("loading");
+}
+
+function previewFile(file) {
+  // show the preview of the image
+  console.log(file.name);
+  var fileName = encodeURI(file.name);
+
+  var reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onloadend = () => {
+    imagePreview.src = URL.createObjectURL(file);
+
+    show(imagePreview);
+    hide(uploadCaption);
+
+    // reset
+    predResult.innerHTML = "";
+    predProbability.innerHTML = "";
+    imageDisplay.classList.remove("loading");
+
+    displayImage(reader.result, "image-display");
+  };
+}
+
+//========================================================================
+// Helper functions
+//========================================================================
+
+function predictImage(image) {
+  fetch("/predict", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(image)
+  })
+    .then(resp => {
+      if (resp.ok)
+        resp.json().then(data => {
+          displayResult(data);
+        });
+    })
+    .catch(err => {
+      console.log("An error occured", err.message);
+      window.alert("Oops! Something went wrong.");
+    });
+}
+
+function displayImage(image, id) {
+  // display image on given id <img> element
+  let display = document.getElementById(id);
+  display.src = image;
+  show(display);
+}
+
+function displayResult(data) {
+  // display the result
+  // imageDisplay.classList.remove("loading");
+  hide(loader);
+  predResult.innerHTML = data.result;
+  predProbability.innerHTML = data.probability;
+
+  show(predResult);
+  show(predProbability);
+}
+
+function hide(el) {
+  // hide an element
+  el.classList.add("hidden");
+}
+
+function show(el) {
+  // show an element
+  el.classList.remove("hidden");
+}