Spaces:
Sleeping
Sleeping
File size: 7,220 Bytes
ad4fcaa f78cd2e ad4fcaa 9c1a2e7 f0ffcb0 4cd3d2e d5b09ba 8836dc7 ad4fcaa 8836dc7 0d59b07 8836dc7 27f6bdc c5e4f2c 27f6bdc c87da77 27f6bdc e79973b 27f6bdc 433ec1c 27f6bdc 433ec1c 27f6bdc 8782e12 27f6bdc 8c128ee 27f6bdc 8782e12 8c128ee 27f6bdc 433ec1c 1b4ef9f 433ec1c 1b4ef9f 433ec1c 8836dc7 ad4fcaa 8836dc7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generate images with signed AI attribution</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="json_viewer.css" />
<script src="https://unpkg.com/@peculiar/x509"></script>
<script type="text/javascript" src="json_viewer.js"></script>
<script type="module" src="script.js"></script>
<script
type="module"
src="https://display.truepic.com/truepic_display.es.js"
></script>
</head>
<body>
<section id="header">
<div style="display: flex">
<div style="flex-grow: 1">
<h1>GenAI with Content Credentials</h1>
<p>
Add AI credentials to your generated images using C2PA powered by
Truepic
</p>
</div>
<div class="alert alert-primary" role="alert">
<h4>Support our work!</h4>
<p>
<img src="images/heart_icon.svg" /> Like this Space in the nav above
</p>
<p>
<img src="images/wave_icon.svg" /> Joining the conversation in the
Community tab
</p>
</div>
</div>
</section>
<section id="content">
<div id="column-one">
<div class="container">
<div class="output">
<div id="image-container">
<img src="images/placeholder.png" id="placeholder" />
<img
src="images/spinner.svg"
id="spinner"
style="display: none"
/>
</div>
</div>
<div style="display: flex">
<div class="parameters">
Image prompt: “<span class="prompt"></span>”<br />
Model: <span class="model"></span>
</div>
<a href="#" target="_blank" id="download-link"
><img src="images/download.png" id="download"
/></a>
</div>
</div>
<section class="verification-details">
<nav>
<ul>
<li>
<a class="active" id="verification-nav">Verification output</a>
</li>
<li><a id="certificate-nav">Certificate</a></li>
</ul>
</nav>
<div class="verification">
<p>
The raw verification response, which contains details not
displayed in the Content Credentials overlay.
</p>
<div id="verification-output"></div>
</div>
<div class="certificate" id="certificate-output">
<p>
Details about the certificate used for signing.<br />
Truepic maintains the first and only purpose-built C2PA
certificate authority.
</p>
<p><strong style="font-weight: 600">Certificate chain</strong></p>
<ul id="certificate-list"></ul>
<p><strong style="font-weight: 600">Details</strong></p>
<div class="details">
<strong>Basic info</strong>
<div>
<label>Type</label>
X.509 Certificate
</div>
<div>
<label>Serial Number</label>
<div class="serialNumber"></div>
</div>
<div>
<label>Issued</label>
<div class="issued"></div>
</div>
<div>
<label>Expired</label>
<div class="expired"></div>
</div>
<strong>Subject</strong>
<div>
<label>Common Name</label>
<div class="subjectCommonName"></div>
</div>
<div>
<label>Organization</label>
<div class="subjectOrganization"></div>
</div>
<div>
<label>Organization Unit</label>
<div class="subjectOrganizationUnit"></div>
</div>
<div>
<label>Country</label>
<div class="subjectCountry"></div>
</div>
<strong>Issuer</strong>
<div>
<label>Common Name</label>
<div class="issuerCommonName"></div>
</div>
<div>
<label>Organization</label>
<div class="issuerOrganization"></div>
</div>
<div>
<label>Organization Unit</label>
<div class="issuerOrganizationUnit"></div>
</div>
<div>
<label>Country</label>
<div class="issuerCountry"></div>
</div>
<strong>Public Key Info</strong>
<div>
<label>Algorithm</label>
<div class="algorithm"></div>
</div>
<div id="modulusContainer">
<label>Modulus</label>
<div class="modulus"></div>
</div>
<div id="curveContainer">
<label>Curve</label>
<div class="namedCurve"></div>
</div>
</div>
</div>
</section>
<img src="images/logo.png" id="logo" />
</div>
<div id="column-two">
<div class="form">
<form class="text-gen-form">
<label for="text-gen-input">Image prompt</label>
<textarea id="text-gen-input"></textarea>
<label>Model</label>
<div class="custom-select">
<select id="model">
<option disabled selected value>Select</option>
<option value="runwayml/stable-diffusion-v1-5,1.5">
runwayml/stable-diffusion-v1-5
</option>
<option value="CompVis/stable-diffusion-v1-4,1.4">
CompVis/stable-diffusion-v1-4
</option>
<option value="stabilityai/stable-diffusion-2-1,2.1">
stabilityai/stable-diffusion-2-1
</option>
</select>
</div>
<button id="text-gen-submit">Submit</button>
</form>
</div>
<div class="description">
<p><strong>How it works</strong></p>
<p>
Generate an image using a hosted model and add an AI disclosure to
the file. This information, referred to as Content Credentials,
serves as a nutrition label for the content. We employ the
tamper-evident open C2PA standard, which utilizes PKI and is
resistant to forgery. You can download and transfer the image to
supported editing tools like Photoshop, where your edit history can
also be securely added to the file. This historical information,
known as provenance, accompanies your media and can be extracted and
displayed using a tool or website.
</p>
</div>
</div>
</section>
</body>
</html>
|