479 lines
No EOL
19 KiB
PHP
479 lines
No EOL
19 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Enhanced PowerPoint Brief Extractor</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
background: #000000;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.logo {
|
|
margin-bottom: 30px;
|
|
filter: invert(1);
|
|
}
|
|
|
|
.logo img {
|
|
height: 80px;
|
|
width: auto;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 28px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.version-selector, .model-selector {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
|
|
.version-selector h3, .model-selector h3 {
|
|
color: #007bff;
|
|
margin-bottom: 15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.model-selector {
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.model-selector h3 {
|
|
color: #28a745;
|
|
}
|
|
|
|
.version-option, .model-option {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 2px solid #e9ecef;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.version-option:hover {
|
|
border-color: #007bff;
|
|
background: #f8f9ff;
|
|
}
|
|
|
|
.version-option.selected {
|
|
border-color: #007bff;
|
|
background: #e6f3ff;
|
|
}
|
|
|
|
.model-option:hover {
|
|
border-color: #28a745;
|
|
background: #f8fff8;
|
|
}
|
|
|
|
.model-option.selected {
|
|
border-color: #28a745;
|
|
background: #e6ffe6;
|
|
}
|
|
|
|
.version-option input[type="radio"], .model-option input[type="radio"] {
|
|
margin-right: 15px;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.version-details, .model-details {
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.version-title, .model-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.version-description, .model-description {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.features-list {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #007bff;
|
|
}
|
|
|
|
.model-specs {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #28a745;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.upload-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
background: #f8f9fa;
|
|
border: 2px dashed #000000;
|
|
border-radius: 10px;
|
|
padding: 30px 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.file-input-wrapper:hover {
|
|
background: #e9ecef;
|
|
border-color: #333333;
|
|
}
|
|
|
|
.file-input-wrapper input[type=file] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-input-text {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.file-types {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.upload-btn {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 600;
|
|
background: #000000;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
border-radius: 10px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.upload-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
background: #333333;
|
|
}
|
|
|
|
.upload-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.selected-file {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="logo">
|
|
<img src="Adidas_Logo.svg" alt="Adidas Logo">
|
|
</div>
|
|
<div class="container">
|
|
<h2>Enhanced Brief Extractor</h2>
|
|
|
|
<div class="version-selector">
|
|
<h3>Choose Processing Method</h3>
|
|
|
|
<div class="version-option selected" onclick="selectVersion('enhanced')">
|
|
<input type="radio" name="version" value="enhanced" checked>
|
|
<div class="version-details">
|
|
<div class="version-title">🚀 Enhanced Multi-Pass Analysis</div>
|
|
<div class="version-description">Advanced AI processing with comprehensive extraction and validation</div>
|
|
<div class="features-list">✓ Multi-perspective analysis ✓ Document structure mapping ✓ Cross-validation ✓ Enhanced accuracy</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="version-option" onclick="selectVersion('original')">
|
|
<input type="radio" name="version" value="original">
|
|
<div class="version-details">
|
|
<div class="version-title">⚡ Original Fast Processing</div>
|
|
<div class="version-description">Quick single-pass extraction for basic requirements</div>
|
|
<div class="features-list">✓ Fast processing ✓ Basic extraction ✓ Simple output</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-selector">
|
|
<h3>AI Model Configuration</h3>
|
|
|
|
<div class="model-option selected">
|
|
<div class="model-details">
|
|
<div class="model-title">🧠 GPT-5 with High Reasoning Effort</div>
|
|
<div class="model-description">Latest OpenAI GPT-5 model with maximum reasoning capability for superior document analysis</div>
|
|
<div class="model-specs">Max Output: 100K tokens | High Reasoning | Best for: All brief types</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="uploadForm" method="post" enctype="multipart/form-data" class="upload-form">
|
|
<input type="hidden" name="selected_model" id="selectedModel" value="gpt-5">
|
|
<div class="file-input-wrapper">
|
|
<input type="file" name="fileToUpload" id="fileToUpload" accept=".ppt,.pptx,.pdf,.docx,.xlsx,.doc,.xls">
|
|
<div class="file-input-text">
|
|
Click to select document file
|
|
</div>
|
|
<div class="file-types">
|
|
Supported: PowerPoint, Word, PDF, Excel
|
|
</div>
|
|
</div>
|
|
<div class="selected-file" id="selectedFile"></div>
|
|
<input type="submit" value="Process Document" name="submit" class="upload-btn">
|
|
</form>
|
|
|
|
<div style="text-align: center; margin-top: 20px;">
|
|
<button onclick="openCostCalculator()" style="background: #ffc107; color: #000; padding: 12px 25px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 600; font-family: 'Montserrat', sans-serif;">
|
|
💰 Cost Calculator
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Cost Calculator Modal -->
|
|
<div id="costCalculatorModal" class="modal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
|
|
<div class="modal-content" style="background-color: #fefefe; margin: 5% auto; padding: 30px; border-radius: 15px; width: 90%; max-width: 600px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
|
|
<span class="close" onclick="closeCostCalculator()" style="color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">×</span>
|
|
<h2 style="color: #333; margin-bottom: 25px; font-family: 'Montserrat', sans-serif;">💰 OpenAI Cost Calculator</h2>
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<label for="modelSelect" style="display: block; margin-bottom: 8px; font-weight: 600; font-family: 'Montserrat', sans-serif;">Select Model:</label>
|
|
<select id="modelSelect" style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px; font-family: 'Montserrat', sans-serif;">
|
|
<option value="gpt-5">GPT-5 with High Reasoning</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
|
|
<div style="flex: 1;">
|
|
<label for="inputTokens" style="display: block; margin-bottom: 8px; font-weight: 600; font-family: 'Montserrat', sans-serif;">Input Tokens:</label>
|
|
<input type="number" id="inputTokens" placeholder="e.g., 50000" style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px; font-family: 'Montserrat', sans-serif;">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="outputTokens" style="display: block; margin-bottom: 8px; font-weight: 600; font-family: 'Montserrat', sans-serif;">Output Tokens:</label>
|
|
<input type="number" id="outputTokens" placeholder="e.g., 25000" style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px; font-family: 'Montserrat', sans-serif;">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px;">
|
|
<label for="cachedTokens" style="display: block; margin-bottom: 8px; font-weight: 600; font-family: 'Montserrat', sans-serif;">Cached Input Tokens (optional):</label>
|
|
<input type="number" id="cachedTokens" placeholder="e.g., 10000" value="0" style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px; font-family: 'Montserrat', sans-serif;">
|
|
</div>
|
|
|
|
<button onclick="calculateCost()" style="background: #000; color: white; padding: 15px 30px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; font-weight: 600; font-family: 'Montserrat', sans-serif; width: 100%;">Calculate Cost</button>
|
|
|
|
<div id="costResult" style="margin-top: 25px; padding: 20px; background: #f8f9fa; border-radius: 10px; display: none;">
|
|
<h3 style="color: #333; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">Cost Breakdown</h3>
|
|
<div id="costDetails"></div>
|
|
</div>
|
|
|
|
<div style="margin-top: 25px; padding: 20px; background: #e6f3ff; border-radius: 10px; border-left: 4px solid #007bff;">
|
|
<h4 style="color: #0066cc; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">Pricing Information</h4>
|
|
<div style="font-size: 14px; color: #333; font-family: 'Montserrat', sans-serif; line-height: 1.6;">
|
|
<strong>GPT-5:</strong> Input: $2.50/1M | Cached: $1.25/1M | Output: $10.00/1M
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function selectVersion(version) {
|
|
// Update radio buttons
|
|
const radios = document.querySelectorAll('input[name="version"]');
|
|
radios.forEach(radio => {
|
|
radio.checked = radio.value === version;
|
|
});
|
|
|
|
// Update visual selection
|
|
const options = document.querySelectorAll('.version-option');
|
|
options.forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
event.currentTarget.classList.add('selected');
|
|
|
|
// Update form action
|
|
const form = document.getElementById('uploadForm');
|
|
if (version === 'enhanced') {
|
|
form.action = 'upload_enhanced.php';
|
|
} else {
|
|
form.action = 'upload.php';
|
|
}
|
|
}
|
|
|
|
// GPT-5 is now hardcoded, no model selection needed
|
|
|
|
// Set initial form action
|
|
document.getElementById('uploadForm').action = 'upload_enhanced.php';
|
|
|
|
// File selection handler
|
|
document.getElementById('fileToUpload').addEventListener('change', function(e) {
|
|
const selectedFile = document.getElementById('selectedFile');
|
|
if (e.target.files.length > 0) {
|
|
const file = e.target.files[0];
|
|
const fileSize = (file.size / 1024 / 1024).toFixed(2);
|
|
selectedFile.innerHTML = `
|
|
<strong>Selected:</strong> ${file.name}<br>
|
|
<strong>Size:</strong> ${fileSize} MB<br>
|
|
<strong>Type:</strong> ${file.type || 'Unknown'}
|
|
`;
|
|
} else {
|
|
selectedFile.textContent = '';
|
|
}
|
|
});
|
|
|
|
// Form submission handler
|
|
document.getElementById('uploadForm').addEventListener('submit', function(e) {
|
|
const fileInput = document.getElementById('fileToUpload');
|
|
if (!fileInput.files.length) {
|
|
alert('Please select a file to process.');
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// Show processing message
|
|
const submitBtn = document.querySelector('.upload-btn');
|
|
submitBtn.textContent = 'Processing...';
|
|
submitBtn.disabled = true;
|
|
});
|
|
|
|
// Cost Calculator Functions
|
|
function openCostCalculator() {
|
|
document.getElementById('costCalculatorModal').style.display = 'block';
|
|
}
|
|
|
|
function closeCostCalculator() {
|
|
document.getElementById('costCalculatorModal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('costCalculatorModal');
|
|
if (event.target == modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function calculateCost() {
|
|
const model = document.getElementById('modelSelect').value;
|
|
const inputTokens = parseInt(document.getElementById('inputTokens').value) || 0;
|
|
const outputTokens = parseInt(document.getElementById('outputTokens').value) || 0;
|
|
const cachedTokens = parseInt(document.getElementById('cachedTokens').value) || 0;
|
|
|
|
if (inputTokens === 0 && outputTokens === 0) {
|
|
alert('Please enter at least input or output token amounts.');
|
|
return;
|
|
}
|
|
|
|
// Pricing per 1M tokens
|
|
const pricing = {
|
|
'gpt-5': {
|
|
input: 2.50,
|
|
cached: 1.25,
|
|
output: 10.00
|
|
}
|
|
};
|
|
|
|
const rates = pricing[model];
|
|
|
|
// Calculate costs (convert to per-million)
|
|
const inputCost = (inputTokens / 1000000) * rates.input;
|
|
const cachedCost = (cachedTokens / 1000000) * rates.cached;
|
|
const outputCost = (outputTokens / 1000000) * rates.output;
|
|
const totalCost = inputCost + cachedCost + outputCost;
|
|
|
|
// Display results
|
|
const resultDiv = document.getElementById('costResult');
|
|
const detailsDiv = document.getElementById('costDetails');
|
|
|
|
let detailsHTML = `
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px; background: white; border-radius: 5px;">
|
|
<span><strong>Model:</strong></span>
|
|
<span>GPT-5 with High Reasoning Effort</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px; background: white; border-radius: 5px;">
|
|
<span>Input Tokens (${inputTokens.toLocaleString()}):</span>
|
|
<span>$${inputCost.toFixed(4)}</span>
|
|
</div>
|
|
`;
|
|
|
|
if (cachedTokens > 0) {
|
|
detailsHTML += `
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px; background: white; border-radius: 5px;">
|
|
<span>Cached Input Tokens (${cachedTokens.toLocaleString()}):</span>
|
|
<span>$${cachedCost.toFixed(4)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
detailsHTML += `
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px; background: white; border-radius: 5px;">
|
|
<span>Output Tokens (${outputTokens.toLocaleString()}):</span>
|
|
<span>$${outputCost.toFixed(4)}</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; margin-top: 15px; padding: 12px; background: #d4edda; border-radius: 5px; font-weight: bold; font-size: 16px;">
|
|
<span>Total Cost:</span>
|
|
<span style="color: #d9534f;">$${totalCost.toFixed(4)}</span>
|
|
</div>
|
|
<div style="margin-top: 10px; padding: 10px; background: #e9ecef; border-radius: 5px; font-size: 14px; text-align: center;">
|
|
Total Tokens: ${(inputTokens + cachedTokens + outputTokens).toLocaleString()}
|
|
</div>
|
|
`;
|
|
|
|
detailsDiv.innerHTML = detailsHTML;
|
|
resultDiv.style.display = 'block';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |