Hugging Face's logo

Spaces:
KrorngAI
/
image-annotator-object-detection
Running

App Files Community
image-annotator-object-detection / templates /index.html
Kimang18's picture
Kimang18
add YouTube embed
9e9f57c verified
Raw History Blame Contribute Delete
3.67 kB
<!doctype html>
<html style="height:100%;">
<head>
<title>Upload Your Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
<!-- Left Section: Two Logos -->
<div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start">
<!-- Logo 1
<img src="{{ url_for('static', filename='images/AI-FARM-logo-version 2 -20-JULY-2023-01.png') }}" alt="AIFarm" class="squared-full shadow-sm" height="75px" width="75px">
-->
<!-- Logo 1
<img src="{{ url_for('static', filename='images/FACTORYAI-FINAL-SQUARE-16-AUG-2023.png') }}" alt="FactoryAI" class="squared-full shadow-sm">
-->
<!-- Logo 2 -->
<img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="150cqh">
</div>
<!-- Middle Section: Title -->
<div class="flex-grow text-center mb-4 sm:mb-0 order-first sm:order-none w-full sm:w-auto">
<h1 class="text-3xl sm:text-4xl font-bold text-gray-800 leading-tight">
🇰🇭 For the development of AI 🇰🇭
</h1>
</div>
<!-- Right Section: Placeholder (can be used for user avatar/menu later) -->
<!-- Added a placeholder to help balance the flex layout, though not strictly required by prompt -->
<div class="w-full sm:w-auto flex justify-center sm:justify-end">
<!-- Placeholder for potential future elements, e.g., user icon -->
<div class="w-[128px] h-0 sm:h-[60px]"></div>
</div>
</header>
<div class="container">
<center>
<div class="jumbotron" style="margin-top:20px;">
<h2 style="margin:-20px 0 40px 0;">Image Annotator</h2>
<h1 style="margin:-20px 0 40px 0;">for Object Detection</h1>
<h3>Upload your image dataset below and click submit</h3>
<form enctype="multipart/form-data" method="post">
<label class="btn btn-default">
<input id="file" name="file" type="file" multiple/>
</label>
<br>
<button type="submit" class="btn btn-success" style="margin-top:30px;">Submit</button>
</form>
<div style="margin-top:100px;">
<h2 style="margin:-20px 0 40px 0;">Using LoRA-C and DoRA to fine-tune Detr-Resnet50 on Colab</h2>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CbP9wIbu7IY?si=wD81nUiVRYzMySw6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<a href="https://colab.research.google.com/github/Kimang18/DoRA-LoRAC-for-object-detection/blob/main/DoRA-LoRAC_object_detection.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" /, width=150, height=150/>
</a>
</div>
</div>
</center>
</div>
<!-- FOOTER ADDED HERE -->
<footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl">
Thanks Huggingface Spaces 🤗
</footer>
</body>
</html>