HirModel commited on
Commit
4e143a3
·
verified ·
1 Parent(s): a6dea4b

Upload 2 files

Browse files

Trace Capsule Bridge Prototype is an independent public-review demo for a lightweight bridge layer around provenance-bearing content.

The prototype models a C2PA / Content Credentials-facing handoff path:

Content Credential summary → Trace Capsule → HIR/OAM pressure check → loop state → source-return.

It demonstrates how visible provenance can remain bounded during interpretation, summarization, attribution, review, and public reuse.

This Space is not an Adobe product claim, not a C2PA replacement proposal, not a Content Credentials implementation, and not an assertion of affiliation, endorsement, adoption, approval, or inside knowledge.

The prototype uses demo data only and does not inspect or implement live C2PA manifests.

Core demo features:
- Credential summary panel
- Trace Capsule panel
- HIR/OAM pressure-check flags
- Interactive loop-state output
- Source-return controls
- JSON review packet preview
- Portable static HTML implementation

Loop states:
- HELD
- STRAINED
- REPAIRING
- FALSE CLOSURE RISK
- CLOSED FOR CURRENT SCOPE

Public review only.

Files changed (2) hide show
  1. README.md +48 -4
  2. index.html +567 -17
README.md CHANGED
@@ -1,12 +1,56 @@
1
  ---
2
  title: Trace Capsule Bridge Prototype
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
 
7
  pinned: false
8
  license: cc-by-nc-sa-4.0
9
  short_description: Trace Capsule bridge for provenance interpretation
 
 
 
 
 
 
 
 
 
10
  ---
11
 
12
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
  title: Trace Capsule Bridge Prototype
3
+ emoji: 🔗
4
+ colorFrom: blue
5
+ colorTo: indigo
6
  sdk: static
7
+ app_file: index.html
8
  pinned: false
9
  license: cc-by-nc-sa-4.0
10
  short_description: Trace Capsule bridge for provenance interpretation
11
+ tags:
12
+ - provenance
13
+ - c2pa
14
+ - content-credentials
15
+ - digital-trust
16
+ - trace-capsules
17
+ - hir-oam
18
+ - source-return
19
+ - static-html
20
  ---
21
 
22
+ # Trace Capsule Bridge Prototype
23
+
24
+ A self-contained public-review prototype for a lightweight Trace Capsule bridge layer around provenance-bearing content.
25
+
26
+ This demo models the path:
27
+
28
+ **Content Credential summary → Trace Capsule → HIR/OAM pressure check → loop state → source-return**
29
+
30
+ ## Public Review Boundary
31
+
32
+ This is an independent public-review demo. It is not an Adobe product claim, not a C2PA replacement proposal, not a Content Credentials implementation, and not an assertion of affiliation, endorsement, adoption, approval, or inside knowledge.
33
+
34
+ The prototype uses demo data only and does not inspect or implement live C2PA manifests.
35
+
36
+ ## What It Demonstrates
37
+
38
+ - Credential summary panel
39
+ - Trace Capsule panel
40
+ - HIR/OAM pressure-check flags
41
+ - Interactive loop-state output
42
+ - Source-return controls
43
+ - JSON review packet preview
44
+ - Portable single-file static HTML structure
45
+
46
+ ## Loop States
47
+
48
+ - HELD
49
+ - STRAINED
50
+ - REPAIRING
51
+ - FALSE CLOSURE RISK
52
+ - CLOSED FOR CURRENT SCOPE
53
+
54
+ ## License
55
+
56
+ This public-review prototype is released under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International: **CC BY-NC-SA 4.0**.
index.html CHANGED
@@ -1,19 +1,569 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>C2PA / Adobe Bridge Layer — Trace Capsule Prototype v0.1</title>
7
+ <meta name="description" content="Independent public-review prototype demonstrating a lightweight Trace Capsule bridge layer for provenance-bearing content: credential summary, HIR/OAM pressure check, loop state, and source-return." />
8
+ <meta property="og:title" content="C2PA / Adobe Bridge Layer — Trace Capsule Prototype v0.1" />
9
+ <meta property="og:description" content="A public-review demo showing how provenance-bearing content can preserve bounded interpretation, attribution, uncertainty, loop state, and source-return after visibility." />
10
+ <meta name="theme-color" content="#0f65d6" />
11
+ <style>
12
+ :root {
13
+ --bg: #f5f9ff;
14
+ --panel: #ffffff;
15
+ --ink: #14233b;
16
+ --muted: #5a6880;
17
+ --line: #d9e6f7;
18
+ --blue: #0f65d6;
19
+ --blue-2: #0b83e6;
20
+ --cyan: #13bfd0;
21
+ --green: #17875d;
22
+ --amber: #9b6400;
23
+ --orange: #c7511f;
24
+ --red: #b42318;
25
+ --violet: #6544c5;
26
+ --shadow: 0 22px 70px rgba(16, 67, 136, .16);
27
+ --radius: 22px;
28
+ --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
29
+ --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
30
+ }
31
+ * { box-sizing: border-box; }
32
+ body {
33
+ margin: 0;
34
+ font-family: var(--sans);
35
+ color: var(--ink);
36
+ background:
37
+ radial-gradient(circle at 18% 0%, rgba(19,191,208,.28), transparent 32rem),
38
+ radial-gradient(circle at 80% 0%, rgba(15,101,214,.20), transparent 28rem),
39
+ linear-gradient(180deg, #eef7ff 0%, var(--bg) 46%, #ffffff 100%);
40
+ line-height: 1.5;
41
+ }
42
+ a { color: var(--blue); }
43
+ .skip-link {
44
+ position: absolute;
45
+ left: -999px;
46
+ top: 1rem;
47
+ background: var(--ink);
48
+ color: #fff;
49
+ padding: .75rem 1rem;
50
+ border-radius: .75rem;
51
+ z-index: 1000;
52
+ }
53
+ .skip-link:focus { left: 1rem; }
54
+ .wrap { max-width: 1180px; margin: 0 auto; padding: 28px; }
55
+ header.hero {
56
+ position: relative;
57
+ overflow: hidden;
58
+ border: 1px solid rgba(15,101,214,.14);
59
+ border-radius: 30px;
60
+ background: rgba(255,255,255,.78);
61
+ box-shadow: var(--shadow);
62
+ padding: clamp(24px, 5vw, 58px);
63
+ margin: 22px 0 26px;
64
+ }
65
+ .hero::before {
66
+ content: "";
67
+ position: absolute;
68
+ inset: -1px;
69
+ background: radial-gradient(circle at 78% 20%, rgba(19,191,208,.18), transparent 22rem);
70
+ pointer-events: none;
71
+ }
72
+ .hero > * { position: relative; z-index: 1; }
73
+ .kicker {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: .55rem;
77
+ font-size: .82rem;
78
+ font-weight: 800;
79
+ letter-spacing: .08em;
80
+ text-transform: uppercase;
81
+ color: #0a4ea8;
82
+ background: #eaf4ff;
83
+ border: 1px solid #cfe5ff;
84
+ border-radius: 999px;
85
+ padding: .42rem .75rem;
86
+ }
87
+ .pin {
88
+ width: 24px; height: 24px; border-radius: 50%;
89
+ display: inline-grid; place-items: center;
90
+ background: #111827; color: #fff;
91
+ font-size: .68rem; font-weight: 900;
92
+ letter-spacing: -.03em;
93
+ }
94
+ h1 { font-size: clamp(2.25rem, 6vw, 5.4rem); line-height: .94; margin: 20px 0 14px; letter-spacing: -.06em; }
95
+ h2 { font-size: clamp(1.35rem, 2.6vw, 2.25rem); letter-spacing: -.035em; margin: 0 0 1rem; }
96
+ h3 { font-size: 1.05rem; margin: 0 0 .65rem; letter-spacing: -.02em; }
97
+ .subtitle { max-width: 860px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0 0 28px; }
98
+ .boundary {
99
+ display: grid; gap: 10px;
100
+ max-width: 960px;
101
+ border: 1px solid #d9e6f7;
102
+ background: #f8fbff;
103
+ border-radius: 18px;
104
+ padding: 16px 18px;
105
+ color: #41516c;
106
+ }
107
+ .boundary strong { color: var(--ink); }
108
+ .flow {
109
+ display: grid;
110
+ grid-template-columns: repeat(7, minmax(0, 1fr));
111
+ gap: 10px;
112
+ align-items: stretch;
113
+ margin: 24px 0 8px;
114
+ }
115
+ .flow-step {
116
+ min-height: 82px;
117
+ border: 1px solid var(--line);
118
+ border-radius: 18px;
119
+ background: #fff;
120
+ padding: 12px;
121
+ box-shadow: 0 8px 28px rgba(41, 89, 153, .08);
122
+ }
123
+ .flow-step span { display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
124
+ .flow-step b { display:block; margin-top:6px; font-size:.98rem; }
125
+ .grid { display: grid; gap: 20px; }
126
+ .grid.two { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
127
+ .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
128
+ .card {
129
+ background: var(--panel);
130
+ border: 1px solid var(--line);
131
+ border-radius: var(--radius);
132
+ padding: 20px;
133
+ box-shadow: 0 12px 40px rgba(27, 69, 128, .08);
134
+ }
135
+ .section { margin: 20px 0; }
136
+ .small { font-size: .9rem; color: var(--muted); }
137
+ .micro { font-size: .78rem; color: var(--muted); }
138
+ .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
139
+ .pill {
140
+ display: inline-flex; align-items: center; gap: .35rem;
141
+ border: 1px solid #d7e5f7; background: #f7fbff; color: #31506e;
142
+ border-radius: 999px; padding: .38rem .65rem; font-size: .78rem; font-weight: 750;
143
+ }
144
+ .pill.blue { background: #eaf4ff; border-color:#cfe5ff; color:#0a4ea8; }
145
+ .pill.green { background: #eaf8f3; border-color:#c7efdf; color:#126a49; }
146
+ .pill.amber { background: #fff6e4; border-color:#f5d68c; color:#7a4b00; }
147
+ .pill.red { background: #fff0ef; border-color:#ffd1ce; color:#9c1d15; }
148
+ .credential-media {
149
+ border-radius: 18px;
150
+ min-height: 210px;
151
+ background:
152
+ linear-gradient(135deg, rgba(11,131,230,.18), rgba(19,191,208,.16)),
153
+ radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), transparent 14rem),
154
+ linear-gradient(160deg, #0e3866, #0b83e6 46%, #93e2ee 100%);
155
+ position: relative;
156
+ overflow: hidden;
157
+ border: 1px solid #cfe5ff;
158
+ }
159
+ .credential-media::before, .credential-media::after {
160
+ content: ""; position: absolute; border-radius: 999px; background: rgba(255,255,255,.34);
161
+ }
162
+ .credential-media::before { width: 300px; height: 300px; right: -90px; top: -110px; }
163
+ .credential-media::after { width: 460px; height: 160px; left: -160px; bottom: -60px; transform: rotate(-8deg); }
164
+ .media-label {
165
+ position: absolute; left: 14px; top: 14px; z-index: 1;
166
+ display: inline-flex; gap: .45rem; align-items: center;
167
+ color: #10243c; background: rgba(255,255,255,.86);
168
+ border: 1px solid rgba(255,255,255,.75);
169
+ border-radius: 999px; padding: .45rem .7rem; font-size: .78rem; font-weight: 800;
170
+ }
171
+ dl.meta { display: grid; gap: 10px; margin: 16px 0 0; }
172
+ .row {
173
+ display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px;
174
+ padding: 10px 0; border-top: 1px solid #eef3fb;
175
+ }
176
+ .row dt { color: var(--muted); font-weight: 750; }
177
+ .row dd { margin: 0; font-weight: 700; word-break: break-word; }
178
+ .control-group { display: grid; gap: 12px; margin-top: 12px; }
179
+ label.check, .radio-like {
180
+ display: flex; align-items: flex-start; gap: 10px;
181
+ border: 1px solid #e1ebf8;
182
+ background: #f9fcff;
183
+ border-radius: 14px;
184
+ padding: 10px 12px;
185
+ cursor: pointer;
186
+ }
187
+ input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex: 0 0 auto; }
188
+ select, input[type="text"], textarea {
189
+ width: 100%; border: 1px solid #d6e4f6; border-radius: 14px; padding: 11px 12px;
190
+ font: inherit; color: var(--ink); background: #fff;
191
+ }
192
+ textarea { min-height: 96px; resize: vertical; }
193
+ .state-panel {
194
+ border-radius: 24px; padding: 22px;
195
+ background: linear-gradient(135deg, #fff, #f7fbff);
196
+ border: 1px solid #d7e6f9;
197
+ position: sticky; top: 16px;
198
+ }
199
+ .state-badge {
200
+ display: inline-flex; align-items: center; gap: .55rem;
201
+ border-radius: 999px; padding: .6rem .85rem;
202
+ font-weight: 900; letter-spacing: .04em; font-size: .84rem;
203
+ text-transform: uppercase;
204
+ border: 1px solid transparent;
205
+ }
206
+ .state-badge.HELD { background:#eaf4ff; color:#0a4ea8; border-color:#cfe5ff; }
207
+ .state-badge.STRAINED { background:#fff6e4; color:#7a4b00; border-color:#f5d68c; }
208
+ .state-badge.REPAIRING { background:#f0f3ff; color:#5136a3; border-color:#d9d2ff; }
209
+ .state-badge.FALSE_CLOSURE_RISK { background:#fff0ef; color:#9c1d15; border-color:#ffd1ce; }
210
+ .state-badge.CLOSED_FOR_CURRENT_SCOPE { background:#eaf8f3; color:#126a49; border-color:#c7efdf; }
211
+ .meter {
212
+ height: 14px; background:#e8f0fb; border-radius:999px; overflow:hidden; margin: 16px 0 10px; border: 1px solid #d7e5f7;
213
+ }
214
+ .meter > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .25s ease; }
215
+ .flag-list { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
216
+ .flag-list li {
217
+ display: flex; gap: 10px; align-items: flex-start;
218
+ background: #f8fbff; border: 1px solid #e3eefb; border-radius: 14px; padding: 10px;
219
+ }
220
+ .flag-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--blue); flex: 0 0 auto; }
221
+ .flag-list li.warn .flag-dot { background: var(--amber); }
222
+ .flag-list li.risk .flag-dot { background: var(--red); }
223
+ .flag-list li.good .flag-dot { background: var(--green); }
224
+ .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
225
+ button {
226
+ border: 0; border-radius: 14px; padding: 11px 14px;
227
+ background: var(--blue); color:#fff; font-weight: 850; cursor:pointer;
228
+ box-shadow: 0 10px 24px rgba(15,101,214,.22);
229
+ }
230
+ button.secondary { background:#eef5ff; color:#0a4ea8; box-shadow:none; border:1px solid #cfe5ff; }
231
+ button.ghost { background:transparent; color:#31506e; box-shadow:none; border:1px solid #d7e5f7; }
232
+ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(15,101,214,.34); outline-offset: 2px; }
233
+ .capsule-json {
234
+ max-height: 310px; overflow:auto;
235
+ background: #0f172a; color: #d8e5ff;
236
+ border-radius: 18px; padding: 16px; font-family: var(--mono); font-size: .78rem;
237
+ white-space: pre-wrap; border: 1px solid #22304f;
238
+ }
239
+ .layers { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
240
+ .layer-card { border-radius: 18px; padding: 16px; border: 1px solid #dbe9fa; background: #fff; }
241
+ .layer-card b { display:block; margin-bottom: 6px; }
242
+ footer { margin: 28px 0 10px; color: var(--muted); text-align:center; font-size:.9rem; }
243
+ @media (max-width: 930px) {
244
+ .grid.two, .grid.three, .layers, .flow { grid-template-columns: 1fr; }
245
+ .state-panel { position: static; }
246
+ .row { grid-template-columns: 1fr; gap: 2px; }
247
+ .wrap { padding: 16px; }
248
+ }
249
+ </style>
250
+ </head>
251
+ <body>
252
+ <a class="skip-link" href="#main">Skip to prototype</a>
253
+ <div class="wrap">
254
+ <header class="hero" role="banner">
255
+ <div class="kicker"><span class="pin" aria-hidden="true">TC</span> Public Review Prototype · v0.1</div>
256
+ <h1>The C2PA / Adobe Bridge Layer</h1>
257
+ <p class="subtitle">Trace Capsules, HIR/OAM pressure logic, and a lightweight integrity kernel for provenance-bearing content after it enters interpretation.</p>
258
+ <div class="boundary" aria-label="Public review boundary">
259
+ <strong>Boundary:</strong>
260
+ <span>This is an independent public-review demo. It is not an Adobe product claim, not a C2PA implementation, not a Content Credentials replacement, and not an assertion of affiliation, endorsement, adoption, approval, or inside knowledge.</span>
261
+ </div>
262
+ <div class="flow" aria-label="Bridge flow">
263
+ <div class="flow-step"><span>01</span><b>Create</b></div>
264
+ <div class="flow-step"><span>02</span><b>Credential</b></div>
265
+ <div class="flow-step"><span>03</span><b>Display</b></div>
266
+ <div class="flow-step"><span>04</span><b>Capsule</b></div>
267
+ <div class="flow-step"><span>05</span><b>Check</b></div>
268
+ <div class="flow-step"><span>06</span><b>State</b></div>
269
+ <div class="flow-step"><span>07</span><b>Return</b></div>
270
+ </div>
271
+ </header>
272
+
273
+ <main id="main">
274
+ <section class="section grid two" aria-label="Prototype controls and output">
275
+ <div class="grid">
276
+ <article class="card" aria-labelledby="credential-title">
277
+ <h2 id="credential-title">Credential Summary</h2>
278
+ <p class="small">Demo content card showing the public-facing side of a provenance-bearing trace. This does not inspect real C2PA data.</p>
279
+ <div class="credential-media" role="img" aria-label="Abstract sample media card representing provenance-bearing creative content">
280
+ <span class="media-label"><span class="pin" aria-hidden="true">Cr</span> Sample credential signal</span>
281
+ </div>
282
+ <dl class="meta">
283
+ <div class="row"><dt>Content</dt><dd>Sample editorial image / article header</dd></div>
284
+ <div class="row"><dt>Credential state</dt><dd id="metaCredential">Visible · demo only</dd></div>
285
+ <div class="row"><dt>Origin claim</dt><dd>Created by Collin D. Weber · public review draft</dd></div>
286
+ <div class="row"><dt>Use context</dt><dd id="metaUse">Public article / X post / prototype review</dd></div>
287
+ </dl>
288
+ </article>
289
+
290
+ <article class="card" aria-labelledby="pressure-title">
291
+ <h2 id="pressure-title">Interactive Pressure Check</h2>
292
+ <p class="small">Toggle trace conditions to see the Trace Capsule state and HIR/OAM flags update.</p>
293
+ <div class="control-group">
294
+ <label class="check"><input id="credentialVisible" type="checkbox" checked><span><strong>Credential visible</strong><br><span class="micro">The viewer can access a provenance signal or summary.</span></span></label>
295
+ <label class="check"><input id="sourcePointer" type="checkbox" checked><span><strong>Source pointer preserved</strong><br><span class="micro">The trace still routes toward origin or source context.</span></span></label>
296
+ <label class="check"><input id="attributionPresent" type="checkbox" checked><span><strong>Attribution visible</strong><br><span class="micro">Creator / contributor path remains present where available.</span></span></label>
297
+ <label class="check"><input id="uncertaintyVisible" type="checkbox" checked><span><strong>Uncertainty visible</strong><br><span class="micro">The output preserves what the trace does and does not support.</span></span></label>
298
+ <label class="check"><input id="transformLabeled" type="checkbox" checked><span><strong>Transformation labeled</strong><br><span class="micro">Edits, summaries, remixes, or derivative context are disclosed.</span></span></label>
299
+ <label class="check"><input id="sourceReturn" type="checkbox" checked><span><strong>Source-return path active</strong><br><span class="micro">The loop can return toward attribution, credential state, rights context, or repair.</span></span></label>
300
+ <label class="check"><input id="repairActive" type="checkbox"><span><strong>Repair active</strong><br><span class="micro">A correction, clarification, attribution, or boundary repair is underway.</span></span></label>
301
+ </div>
302
+ <label for="claimScope" class="small" style="display:block;margin-top:16px;font-weight:800;">Claim scope</label>
303
+ <select id="claimScope">
304
+ <option value="bounded">Bounded to what the trace supports</option>
305
+ <option value="wide">Possibly broader than the trace supports</option>
306
+ <option value="overclaim">Overclaims the trace as proof beyond scope</option>
307
+ </select>
308
+ <label for="summaryText" class="small" style="display:block;margin-top:16px;font-weight:800;">Current interpretation / summary boundary</label>
309
+ <textarea id="summaryText">This demo trace can support provenance-aware review of source, attribution, uncertainty, and boundary. It should not be treated as proof beyond its current scope.</textarea>
310
+ </article>
311
+ </div>
312
+
313
+ <aside class="state-panel" aria-labelledby="state-title">
314
+ <h2 id="state-title">Trace Capsule Output</h2>
315
+ <div id="stateBadge" class="state-badge HELD" aria-live="polite">HELD</div>
316
+ <div class="meter" aria-label="Trace stability meter"><div id="meterFill"></div></div>
317
+ <p id="stateExplanation" class="small" aria-live="polite"></p>
318
+ <div class="pill-row" id="capsulePills" aria-label="Capsule quick fields"></div>
319
+ <h3>HIR/OAM Flags</h3>
320
+ <ul id="flagList" class="flag-list" aria-live="polite"></ul>
321
+ <div class="actions">
322
+ <button type="button" id="downloadJson">Download review packet</button>
323
+ <button type="button" id="copyJson" class="secondary">Copy JSON</button>
324
+ <button type="button" id="resetDemo" class="ghost">Reset demo</button>
325
+ </div>
326
+ </aside>
327
+ </section>
328
+
329
+ <section class="section grid two" aria-label="Trace capsule details">
330
+ <article class="card">
331
+ <h2>Trace Capsule Panel</h2>
332
+ <p class="small">A Trace Capsule preserves the relationship between visible provenance and bounded interpretation. It does not replace the credential.</p>
333
+ <dl class="meta" id="capsuleMeta"></dl>
334
+ </article>
335
+ <article class="card">
336
+ <h2>Review Packet Preview</h2>
337
+ <pre id="jsonPreview" class="capsule-json" tabindex="0" aria-label="Trace Capsule JSON review packet preview"></pre>
338
+ </article>
339
+ </section>
340
+
341
+ <section class="section card" aria-labelledby="layers-title">
342
+ <h2 id="layers-title">Public Layer Mapping</h2>
343
+ <p class="small">This demo uses only observable public relationships. It does not assume private routing or internal implementation details.</p>
344
+ <div class="layers">
345
+ <div class="layer-card"><b>Content Credentials</b><span class="small">Make provenance visible to users.</span></div>
346
+ <div class="layer-card"><b>C2PA</b><span class="small">Provides the provenance standard layer.</span></div>
347
+ <div class="layer-card"><b>Adobe-facing workflows</b><span class="small">Bring provenance into real creator, editing, and product environments.</span></div>
348
+ <div class="layer-card"><b>Trace Capsules + HIR/OAM</b><span class="small">Preserve interpretation boundary, loop state, and source-return after visibility.</span></div>
349
+ </div>
350
+ </section>
351
+
352
+ <section class="section grid three" aria-label="Use cases">
353
+ <article class="card"><h3>Creator Attribution</h3><p class="small">Keeps creator/source-return visible when content is clipped, remixed, reposted, summarized, or AI-ingested.</p></article>
354
+ <article class="card"><h3>AI Summaries</h3><p class="small">Makes derivative AI output carry source, boundary, uncertainty, attribution, and claim scope.</p></article>
355
+ <article class="card"><h3>Public Evidence</h3><p class="small">Separates trace authenticity from claim validity so genuine content is not overclaimed.</p></article>
356
+ </section>
357
+
358
+ <section class="section card" aria-labelledby="nonclaims-title">
359
+ <h2 id="nonclaims-title">What This Demo Does Not Claim</h2>
360
+ <div class="pill-row">
361
+ <span class="pill red">No Adobe endorsement claim</span>
362
+ <span class="pill red">No C2PA endorsement claim</span>
363
+ <span class="pill red">No Content Credentials replacement</span>
364
+ <span class="pill red">No cryptographic provenance implementation</span>
365
+ <span class="pill red">No truth-proof claim</span>
366
+ <span class="pill red">No private-system knowledge</span>
367
+ <span class="pill red">No full-stack rewrite requirement</span>
368
+ </div>
369
+ </section>
370
+ </main>
371
+ <footer>
372
+ Created and Developed by Collin D. Weber · Public review demo · Single-file HTML / inline CSS / inline JS · Demo data only
373
+ </footer>
374
+ </div>
375
+
376
+ <script>
377
+ const els = {
378
+ credentialVisible: document.getElementById('credentialVisible'),
379
+ sourcePointer: document.getElementById('sourcePointer'),
380
+ attributionPresent: document.getElementById('attributionPresent'),
381
+ uncertaintyVisible: document.getElementById('uncertaintyVisible'),
382
+ transformLabeled: document.getElementById('transformLabeled'),
383
+ sourceReturn: document.getElementById('sourceReturn'),
384
+ repairActive: document.getElementById('repairActive'),
385
+ claimScope: document.getElementById('claimScope'),
386
+ summaryText: document.getElementById('summaryText'),
387
+ stateBadge: document.getElementById('stateBadge'),
388
+ stateExplanation: document.getElementById('stateExplanation'),
389
+ meterFill: document.getElementById('meterFill'),
390
+ flagList: document.getElementById('flagList'),
391
+ capsulePills: document.getElementById('capsulePills'),
392
+ capsuleMeta: document.getElementById('capsuleMeta'),
393
+ jsonPreview: document.getElementById('jsonPreview'),
394
+ downloadJson: document.getElementById('downloadJson'),
395
+ copyJson: document.getElementById('copyJson'),
396
+ resetDemo: document.getElementById('resetDemo'),
397
+ metaCredential: document.getElementById('metaCredential')
398
+ };
399
+
400
+ const stateText = {
401
+ HELD: 'The trace is coherent enough to handle carefully. Source, credential, boundary, attribution, and uncertainty are visible.',
402
+ STRAINED: 'Something needs clarification. The credential may be present, but context, attribution, uncertainty, or claim scope is under pressure.',
403
+ REPAIRING: 'A repair path is active. Source-return, attribution, uncertainty, or context repair is underway.',
404
+ FALSE_CLOSURE_RISK: 'The loop is at risk of being treated as closed before the trace supports closure. Narrow, repair, or stop the claim.',
405
+ CLOSED_FOR_CURRENT_SCOPE: 'The current loop is handled honestly enough for its specific scope. Source, boundary, uncertainty, and return are intact.'
406
+ };
407
+
408
+ function collect() {
409
+ return {
410
+ credential_visible: els.credentialVisible.checked,
411
+ source_pointer_preserved: els.sourcePointer.checked,
412
+ attribution_visible: els.attributionPresent.checked,
413
+ uncertainty_visible: els.uncertaintyVisible.checked,
414
+ transformation_labeled: els.transformLabeled.checked,
415
+ source_return_active: els.sourceReturn.checked,
416
+ repair_active: els.repairActive.checked,
417
+ claim_scope: els.claimScope.value,
418
+ interpretation_summary: els.summaryText.value.trim()
419
+ };
420
+ }
421
+
422
+ function evaluate(input) {
423
+ let score = 100;
424
+ const flags = [];
425
+ const add = (type, title, detail, impact) => { flags.push({ type, title, detail, impact }); score -= impact; };
426
+
427
+ if (!input.credential_visible) add('risk', 'Credential non-display', 'Provenance may exist but is not visible to the user.', 22);
428
+ else flags.push({ type: 'good', title: 'Credential visible', detail: 'The provenance signal can be accessed by the user.', impact: 0 });
429
+
430
+ if (!input.source_pointer_preserved) add('risk', 'Source pointer loss', 'The trace no longer routes cleanly toward origin or source context.', 24);
431
+ else flags.push({ type: 'good', title: 'Source pointer preserved', detail: 'The trace can still return toward source context.', impact: 0 });
432
+
433
+ if (!input.attribution_visible) add('warn', 'Attribution weakening', 'Creator or contributor visibility is weakened.', 16);
434
+ if (!input.uncertainty_visible) add('warn', 'Uncertainty erased', 'The output hides what the trace does and does not support.', 18);
435
+ if (!input.transformation_labeled) add('warn', 'Transformation not labeled', 'A summary, edit, remix, or derivative context is not clearly disclosed.', 13);
436
+ if (!input.source_return_active) add('warn', 'Source-return inactive', 'The loop does not preserve a clear route toward attribution, credential state, or repair.', 18);
437
+ if (input.claim_scope === 'wide') add('warn', 'Claim scope widening', 'The current claim may be broader than the trace supports.', 18);
438
+ if (input.claim_scope === 'overclaim') add('risk', 'Claim inflation / proof laundering', 'The trace is being treated as proof beyond its supported scope.', 31);
439
+
440
+ let state = 'HELD';
441
+ if (input.repair_active) state = 'REPAIRING';
442
+ if (score >= 92 && input.claim_scope === 'bounded' && input.source_return_active && input.attribution_visible) state = 'CLOSED_FOR_CURRENT_SCOPE';
443
+ if (score < 92 && score >= 58 && !input.repair_active) state = 'STRAINED';
444
+ if ((input.claim_scope === 'overclaim' && !input.uncertainty_visible) || (!input.source_pointer_preserved && input.claim_scope !== 'bounded') || score < 50) state = 'FALSE_CLOSURE_RISK';
445
+ if (input.repair_active && state !== 'FALSE_CLOSURE_RISK') state = 'REPAIRING';
446
+
447
+ score = Math.max(0, Math.min(100, score));
448
+ if (!flags.length) flags.push({ type:'good', title:'No pressure flags', detail:'No degradation flags detected under current demo settings.', impact:0 });
449
+ return { score, state, flags };
450
+ }
451
+
452
+ function capsule(input, result) {
453
+ return {
454
+ prototype: 'trace_capsule_bridge_v0_1_public_review_demo',
455
+ boundary: 'Independent public-review demo. Not a C2PA implementation, Adobe product claim, endorsement claim, or cryptographic provenance replacement.',
456
+ flow: ['Create','Credential','Display','Capsule','Check','State','Return'],
457
+ credential_summary: {
458
+ state: input.credential_visible ? 'visible_demo_signal' : 'not_visible_in_current_context',
459
+ source_pointer: input.source_pointer_preserved ? 'preserved' : 'missing_or_weakened',
460
+ origin_claim: 'Created by Collin D. Weber · public review draft',
461
+ current_use_context: 'Public article / X post / prototype review'
462
+ },
463
+ trace_capsule: {
464
+ source_pointer: input.source_pointer_preserved,
465
+ attribution_state: input.attribution_visible ? 'visible' : 'weakened',
466
+ uncertainty_state: input.uncertainty_visible ? 'visible' : 'erased_or_hidden',
467
+ transformation_label: input.transformation_labeled ? 'visible' : 'missing',
468
+ claim_scope: input.claim_scope,
469
+ interpretation_boundary: input.interpretation_summary,
470
+ source_return_path: input.source_return_active ? 'active' : 'inactive',
471
+ repair_path: input.repair_active ? 'active' : 'not_active'
472
+ },
473
+ hir_oam_pressure_check: {
474
+ trace_stability_score: result.score,
475
+ loop_state: result.state,
476
+ flags: result.flags
477
+ },
478
+ generated_at: new Date().toISOString()
479
+ };
480
+ }
481
+
482
+ function render() {
483
+ const input = collect();
484
+ const result = evaluate(input);
485
+ const packet = capsule(input, result);
486
+
487
+ els.stateBadge.className = 'state-badge ' + result.state;
488
+ els.stateBadge.textContent = result.state.replaceAll('_', ' ');
489
+ els.stateExplanation.textContent = stateText[result.state];
490
+ els.meterFill.style.width = result.score + '%';
491
+ els.metaCredential.textContent = input.credential_visible ? 'Visible · demo only' : 'Not visible in current context · demo only';
492
+
493
+ els.flagList.innerHTML = '';
494
+ result.flags.forEach(flag => {
495
+ const li = document.createElement('li');
496
+ li.className = flag.type;
497
+ li.innerHTML = '<span class="flag-dot" aria-hidden="true"></span><span><strong>' + escapeHtml(flag.title) + '</strong><br><span class="small">' + escapeHtml(flag.detail) + '</span></span>';
498
+ els.flagList.appendChild(li);
499
+ });
500
+
501
+ const pills = [
502
+ ['Credential', input.credential_visible ? 'visible' : 'hidden', input.credential_visible ? 'green' : 'red'],
503
+ ['Attribution', input.attribution_visible ? 'visible' : 'weakened', input.attribution_visible ? 'green' : 'amber'],
504
+ ['Uncertainty', input.uncertainty_visible ? 'visible' : 'hidden', input.uncertainty_visible ? 'green' : 'amber'],
505
+ ['Return', input.source_return_active ? 'active' : 'inactive', input.source_return_active ? 'green' : 'amber'],
506
+ ['Claim', input.claim_scope, input.claim_scope === 'bounded' ? 'green' : input.claim_scope === 'wide' ? 'amber' : 'red']
507
+ ];
508
+ els.capsulePills.innerHTML = pills.map(([k,v,c]) => '<span class="pill '+ c +'">'+ escapeHtml(k) + ': ' + escapeHtml(v) + '</span>').join('');
509
+
510
+ const metaRows = [
511
+ ['Source pointer', input.source_pointer_preserved ? 'Preserved' : 'Missing / weakened'],
512
+ ['Credential state', input.credential_visible ? 'Visible demo signal' : 'Not visible in current context'],
513
+ ['Attribution state', input.attribution_visible ? 'Visible' : 'Weakened'],
514
+ ['Uncertainty state', input.uncertainty_visible ? 'Visible' : 'Erased or hidden'],
515
+ ['Claim boundary', input.claim_scope],
516
+ ['Loop state', result.state.replaceAll('_', ' ')],
517
+ ['Source-return', input.source_return_active ? 'Active' : 'Inactive'],
518
+ ['Repair path', input.repair_active ? 'Active' : 'Not active']
519
+ ];
520
+ els.capsuleMeta.innerHTML = metaRows.map(([dt,dd]) => '<div class="row"><dt>'+ escapeHtml(dt) +'</dt><dd>'+ escapeHtml(dd) +'</dd></div>').join('');
521
+ els.jsonPreview.textContent = JSON.stringify(packet, null, 2);
522
+ window.currentPacket = packet;
523
+ }
524
+
525
+ function escapeHtml(value) {
526
+ return String(value).replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[ch]));
527
+ }
528
+
529
+ function resetDemo() {
530
+ els.credentialVisible.checked = true;
531
+ els.sourcePointer.checked = true;
532
+ els.attributionPresent.checked = true;
533
+ els.uncertaintyVisible.checked = true;
534
+ els.transformLabeled.checked = true;
535
+ els.sourceReturn.checked = true;
536
+ els.repairActive.checked = false;
537
+ els.claimScope.value = 'bounded';
538
+ els.summaryText.value = 'This demo trace can support provenance-aware review of source, attribution, uncertainty, and boundary. It should not be treated as proof beyond its current scope.';
539
+ render();
540
+ }
541
+
542
+ document.querySelectorAll('input, select, textarea').forEach(el => el.addEventListener('input', render));
543
+ document.querySelectorAll('input, select, textarea').forEach(el => el.addEventListener('change', render));
544
+ els.downloadJson.addEventListener('click', () => {
545
+ const blob = new Blob([JSON.stringify(window.currentPacket || {}, null, 2)], { type: 'application/json' });
546
+ const url = URL.createObjectURL(blob);
547
+ const a = document.createElement('a');
548
+ a.href = url;
549
+ a.download = 'trace_capsule_review_packet_demo.json';
550
+ document.body.appendChild(a);
551
+ a.click();
552
+ a.remove();
553
+ URL.revokeObjectURL(url);
554
+ });
555
+ els.copyJson.addEventListener('click', async () => {
556
+ const text = JSON.stringify(window.currentPacket || {}, null, 2);
557
+ try {
558
+ await navigator.clipboard.writeText(text);
559
+ els.copyJson.textContent = 'Copied';
560
+ setTimeout(() => els.copyJson.textContent = 'Copy JSON', 1100);
561
+ } catch (err) {
562
+ els.jsonPreview.focus();
563
+ }
564
+ });
565
+ els.resetDemo.addEventListener('click', resetDemo);
566
+ render();
567
+ </script>
568
+ </body>
569
  </html>