SEAL-js/index.html at main · bgon/SEAL-js · GitHub

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
<!DOCTYPE html>
<html>

<head>
    <title>SEAL-js</title>
    <link rel="icon" href="favicon.svg">
    <link rel="stylesheet" href="static//highlight.min.css">
    <script src="static/highlight.min.js"></script>
    <script type="module" src="./index.js"></script>
    <link rel="stylesheet" href="static/style.css">
</head>

<body>
    <div class="row">
        <img src="static/logo.svg" class="logo"></img>
        <div class="container">
            <h1>SEAL-js</h1>
            <p>Typescript implementation of SEAL (Secure Evidence Attribution Label): an open solution for assigning
                attribution with authentication to media. It can be easily applied to pictures, audio files, videos,
                documents, and other file formats. <span><a
                        href="https://github.com/hackerfactor/SEAL/blob/master/SPECIFICATION.md">Specifications</a></span>
                <span><a href="https://github.com/bgon/SEAL-js">Github</a></span>
            </p>

            </ul>
        </div>


    </div>

    <div class="container">
        <div class="row">
            <div id="media_container" class="display">
                <label for="upload" class="display_label" id="result"><img id="result_logo" src="static/valid.svg"
                        class="validated"></img></label>
                <label for="upload" id="tooltip">
                    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#000"
                            d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
                        </path>
                    </svg>
                    Click to upload media
                    <label for="upload">(or try examples below)</label>
                </label>
                <img id="display_img"></img>
                <video controls id="display_video"></video>
                <code id="display_text"></code>
            </div>
            <div class="code_container">
                <div class="header-pre">
                    <span class="dot dot-red"></span><span class="dot dot-yellow"></span><span
                        class="dot dot-blue"></span>
                </div>
                <div class="tab" style="display:block">
                    <pre>
                        <code id = "console" >hello world</code>
                    </pre>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <input id="upload" type="file" accept="image/*" />
        <div class="examples">
            <div>

                <div class="gallery">
                    <div class="gallery-item" id="ex1">
                        <img src="tests/fixtures/no_seal.jpg" alt='AI image generated by Google. The metadata comment says that it was " Made with Google
                            AI" and it contains an IPTC record that denotes AI-generated content. However, anyone could
                            have added these labels. We "trust" that they were added by Google.' name="no_seal.jpg"
                            class="img-thumbnail" onclick="exampleValidate(this);">
                        <p class="tooltip">AI image generated by Google. The metadata comment says that it was " Made
                            with Google
                            AI" and it contains an IPTC record that denotes AI-generated content. However, anyone could
                            have added these labels. We "trust" that they were added by Google.</p>
                    </div>
                    <div class="gallery-item" id="ex2">
                        <img src="tests/fixtures/anonymous.jpg"
                            alt="Signed using SEAL. It identifies that SignMyData.com witnessed that the file existed with Google's attribution. It hasn't been tampered with since it was signed. This means that, according to SignMyData, we know when it was signed and who witnessed the signature (attestation). However, the person who requested the signature is identified by an anonymous ID. SignMyData vouches for the user by verifying during enrollment."
                            name="anonymous.jpg" class="img-thumbnail" onclick="exampleValidate(this);">
                        <p class="tooltip">Signed using SEAL. It identifies that the remote signer <a
                                href="https://signmydata.com/">SignMyData.com</a> witnessed that the file
                            existed with Google's attribution. It hasn't been tampered with since it was signed. This
                            means that, according to SignMyData, we know when it was signed and who witnessed the
                            signature (attestation). However, the person who requested the signature is identified by an
                            anonymous ID. SignMyData vouches for the user by verifying during enrollment.</p>
                    </div>
                    <div class="gallery-item" id="ex3">
                        <img src="tests/fixtures/neal72.jpg"
                            alt="Signed using SEAL, but it includes the identity of the user who requested the signature."
                            name="neal72.jpg" class="img-thumbnail" onclick="exampleValidate(this);">
                        <p class="tooltip">Signed using SEAL, but it includes the identity of the user who requested the
                            signature.</p>
                    </div>
                    <div class="gallery-item" id="ex4">
                        <img src="tests/fixtures/forged.jpg" alt="Signed using SEAL. 1 byte forged." name="forged.jpg"
                            class="img-thumbnail" onclick="exampleValidate(this);">
                        <p class="tooltip">Signed using SEAL. 1 byte forged.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">Copyright (c) 2024 - The authors</div>
    <script>hljs.highlightAll();</script>
</body>

</html>