Create upload_rank_form.html

app/templates/upload_rank_form.html

@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+
+{% block title %}Upload and Rank Resumes{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <h2 class="mb-4">Test Resume Ranking API</h2>
+
+    <form id="rankForm" action="{{ url_for('api.rank_resumes') }}" method="POST" enctype="multipart/form-data" onsubmit="submitWithAuth(event)">
+        <div class="form-group mb-3">
+            <label for="api_key">API Key</label>
+            <input type="text" class="form-control" id="api_key" name="api_key" placeholder="Enter your API key" required>
+        </div>
+
+        <div class="form-group mb-3">
+            <label for="job_description">Job Description</label>
+            <textarea class="form-control" id="job_description" name="job_description" rows="5" required></textarea>
+        </div>
+
+        <div class="form-group mb-3">
+            <label for="resumes">Upload Resumes</label>
+            <input type="file" class="form-control" id="resumes" name="resumes" accept=".pdf,.doc,.docx" multiple required>
+        </div>
+
+        <button type="submit" class="btn btn-primary">Submit & Rank</button>
+    </form>
+</div>
+
+<script>
+    function submitWithAuth(event) {
+        event.preventDefault();
+
+        const form = document.getElementById('rankForm');
+        const apiKey = document.getElementById('api_key').value;
+        const formData = new FormData(form);
+
+        fetch(form.action, {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Bearer ' + apiKey
+            },
+            body: formData
+        })
+        .then(response => response.text())
+        .then(html => {
+            document.open();
+            document.write(html);
+            document.close();
+        })
+        .catch(err => alert("An error occurred: " + err));
+    }
+</script>
+{% endblock %}