Add Verisoo attest/verify web MVP — full attestation lifecycle
Attest page (/attest): - Image upload with optional caption and location - EXIF auto-extraction toggle - Creates Ed25519-signed attestation record - Stores in verisoo append-only binary log + LMDB index - Displays: record ID, attestor fingerprint, timestamp, image hashes Verify page (/verify): - Image upload for verification against local attestation log - SHA-256 exact matching + perceptual hash matching (pHash, dHash) - Shows match type (exact/perceptual), hash distances, attestor info - Color-coded distance badges (green=0, info<5, warning<10, danger>=10) Attestation log (/attest/log): - Lists recent attestations with short ID, attestor, timestamp, SHA-256 - Shows total record count Verified: full lifecycle works — attest image → verify same image → exact match found Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
@@ -1,11 +1,60 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Attest — SooSeF{% endblock %}
|
||||
{% block title %}Attest Image — SooSeF{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2><i class="bi bi-patch-check me-2"></i>Attest Image</h2>
|
||||
<p class="text-muted">Create a cryptographic provenance attestation — prove when, where, and by whom an image was captured.</p>
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Verisoo attestation UI. Upload an image, optionally add metadata (location, caption),
|
||||
and sign with your Ed25519 identity. The attestation is stored in the local append-only log.
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card bg-dark border-secondary">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-patch-check me-2 text-info"></i>Attest Image</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Create a cryptographic provenance attestation — sign an image with your Ed25519 identity
|
||||
to prove when and by whom it was captured.
|
||||
</p>
|
||||
|
||||
{% if not has_identity %}
|
||||
<div class="alert alert-warning">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
<strong>No identity configured.</strong> Generate one from the
|
||||
<a href="/keys" class="alert-link">Keys page</a> or run <code>soosef init</code>.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="mb-4">
|
||||
<label for="image" class="form-label"><i class="bi bi-image me-1"></i>Image to Attest</label>
|
||||
<input type="file" class="form-control" name="image" id="image"
|
||||
accept="image/png,image/jpeg,image/webp,image/tiff,image/bmp" required>
|
||||
<div class="form-text">Supports PNG, JPEG, WebP, TIFF, BMP.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="caption" class="form-label"><i class="bi bi-chat-text me-1"></i>Caption (optional)</label>
|
||||
<input type="text" class="form-control" name="caption" id="caption"
|
||||
placeholder="What does this image show?" maxlength="500">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="location_name" class="form-label"><i class="bi bi-geo-alt me-1"></i>Location (optional)</label>
|
||||
<input type="text" class="form-control" name="location_name" id="location_name"
|
||||
placeholder="Where was this taken?" maxlength="200">
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input class="form-check-input" type="checkbox" name="auto_exif" id="autoExif" checked>
|
||||
<label class="form-check-label" for="autoExif">
|
||||
Extract EXIF metadata automatically (GPS, timestamp, device)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-info btn-lg w-100" {% if not has_identity %}disabled{% endif %}>
|
||||
<i class="bi bi-patch-check me-2"></i>Create Attestation
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,10 +1,47 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Attestation Log — SooSeF{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2><i class="bi bi-journal-text me-2"></i>Attestation Log</h2>
|
||||
<p class="text-muted">Recent attestations from the local append-only log.</p>
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Lists attestation records with filters by attestor, date range, and verification status.
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4><i class="bi bi-journal-text me-2"></i>Attestation Log</h4>
|
||||
<span class="badge bg-info">{{ total }} total record{{ 's' if total != 1 }}</span>
|
||||
</div>
|
||||
|
||||
{% if records %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Short ID</th>
|
||||
<th>Attestor</th>
|
||||
<th>Timestamp</th>
|
||||
<th>SHA-256</th>
|
||||
<th>Caption</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in records %}
|
||||
<tr>
|
||||
<td class="text-muted">{{ item.index }}</td>
|
||||
<td><code class="text-info">{{ item.record.short_id }}</code></td>
|
||||
<td><code class="small">{{ item.record.attestor_fingerprint[:12] }}...</code></td>
|
||||
<td class="small">{{ item.record.timestamp.strftime('%Y-%m-%d %H:%M') }}</td>
|
||||
<td><code class="small text-warning">{{ item.record.image_hashes.sha256[:16] }}...</code></td>
|
||||
<td class="small text-muted">{{ item.record.metadata.get('caption', '') | truncate(40) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-secondary">
|
||||
<i class="bi bi-inbox me-2"></i>
|
||||
No attestations yet. <a href="/attest" class="alert-link">Attest your first image</a>.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
95
frontends/web/templates/attest/result.html
Normal file
95
frontends/web/templates/attest/result.html
Normal file
@@ -0,0 +1,95 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Attestation Created — SooSeF{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="alert alert-success">
|
||||
<i class="bi bi-check-circle me-2"></i>
|
||||
<strong>Attestation created successfully!</strong>
|
||||
Image <code>{{ filename }}</code> has been attested and stored in the local log (index #{{ index }}).
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-secondary mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-file-earmark-check me-2"></i>Attestation Record</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Record ID</label>
|
||||
<div><code class="text-info">{{ record_id }}</code></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Short ID</label>
|
||||
<div><code class="text-info">{{ short_id }}</code></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Attestor Fingerprint</label>
|
||||
<div><code>{{ attestor[:16] }}...</code></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Timestamp</label>
|
||||
<div>{{ timestamp }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-secondary mb-4">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-hash me-2"></i>Image Hashes</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">SHA-256 (exact identity)</label>
|
||||
<div><code class="text-warning small">{{ sha256 }}</code></div>
|
||||
</div>
|
||||
{% if phash %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">pHash (survives JPEG compression)</label>
|
||||
<div><code class="small">{{ phash }}</code></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if dhash %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">dHash (survives resizing)</label>
|
||||
<div><code class="small">{{ dhash }}</code></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if caption or location_name %}
|
||||
<div class="card bg-dark border-secondary mb-4">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Metadata</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if caption %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">Caption</label>
|
||||
<div>{{ caption }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if location_name %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">Location</label>
|
||||
<div>{{ location_name }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/attest" class="btn btn-outline-info">
|
||||
<i class="bi bi-plus-circle me-2"></i>Attest Another Image
|
||||
</a>
|
||||
<a href="/attest/log" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-journal-text me-2"></i>View Attestation Log
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,12 +1,33 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Verify — SooSeF{% endblock %}
|
||||
{% block title %}Verify Image — SooSeF{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2><i class="bi bi-search me-2"></i>Verify Image</h2>
|
||||
<p class="text-muted">Check an image against attestation records using multi-algorithm hash matching.</p>
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Verisoo verification UI. Upload an image to check against the attestation log.
|
||||
Uses SHA-256 (exact) and perceptual hashes (pHash, dHash, aHash) for robustness
|
||||
against compression and resizing.
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card bg-dark border-secondary">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-search me-2 text-info"></i>Verify Image</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Check an image against the local attestation log. Uses SHA-256 for exact matching
|
||||
and perceptual hashes (pHash, dHash) for robustness against compression and resizing.
|
||||
</p>
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="mb-4">
|
||||
<label for="image" class="form-label"><i class="bi bi-image me-1"></i>Image to Verify</label>
|
||||
<input type="file" class="form-control" name="image" id="image"
|
||||
accept="image/png,image/jpeg,image/webp,image/tiff,image/bmp" required>
|
||||
<div class="form-text">Upload the image you want to verify against known attestations.</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-info btn-lg w-100">
|
||||
<i class="bi bi-search me-2"></i>Verify Image
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
108
frontends/web/templates/attest/verify_result.html
Normal file
108
frontends/web/templates/attest/verify_result.html
Normal file
@@ -0,0 +1,108 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Verification Result — SooSeF{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
{% if found %}
|
||||
<div class="alert alert-success">
|
||||
<i class="bi bi-patch-check me-2"></i>
|
||||
<strong>{{ message }}</strong>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
<strong>{{ message }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Query image hashes #}
|
||||
<div class="card bg-dark border-secondary mb-4">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-hash me-2"></i>Image Hashes for <code>{{ filename }}</code></h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">SHA-256</label>
|
||||
<div><code class="text-warning small">{{ query_hashes.sha256 }}</code></div>
|
||||
</div>
|
||||
{% if query_hashes.phash %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label text-muted small">pHash</label>
|
||||
<div><code class="small">{{ query_hashes.phash }}</code></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Matching attestations #}
|
||||
{% for match in matches %}
|
||||
<div class="card bg-dark border-{{ 'success' if match.match_type == 'exact' else 'info' }} mb-3">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<span>
|
||||
<i class="bi bi-patch-check me-2"></i>
|
||||
Attestation <code>{{ match.record.short_id }}</code>
|
||||
</span>
|
||||
<span class="badge bg-{{ 'success' if match.match_type == 'exact' else 'info' }}">
|
||||
{{ match.match_type }} match
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Attestor</label>
|
||||
<div>
|
||||
<code>{{ match.record.attestor_fingerprint[:16] }}...</code>
|
||||
<span class="text-muted small ms-2">({{ match.attestor_name }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Attested At</label>
|
||||
<div>{{ match.record.timestamp.strftime('%Y-%m-%d %H:%M:%S UTC') }}</div>
|
||||
</div>
|
||||
{% if match.record.captured_at %}
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Captured At</label>
|
||||
<div>{{ match.record.captured_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if match.record.location %}
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small">Location</label>
|
||||
<div>{{ match.record.location }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if match.record.metadata.get('caption') %}
|
||||
<div class="col-12">
|
||||
<label class="form-label text-muted small">Caption</label>
|
||||
<div>{{ match.record.metadata.caption }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if match.distances %}
|
||||
<hr class="border-secondary">
|
||||
<h6 class="text-muted small">Hash Distances</h6>
|
||||
<div class="d-flex gap-3 flex-wrap">
|
||||
{% for name, dist in match.distances.items() %}
|
||||
<span class="badge bg-{{ 'success' if dist == 0 else ('info' if dist < 5 else ('warning' if dist < 10 else 'danger')) }}">
|
||||
{{ name }}: {{ dist }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="d-grid gap-2 mt-4">
|
||||
<a href="/verify" class="btn btn-outline-info">
|
||||
<i class="bi bi-search me-2"></i>Verify Another Image
|
||||
</a>
|
||||
<a href="/attest/log" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-journal-text me-2"></i>View Attestation Log
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user