BigID Developer Portal
Home: Difference between revisions

Home: Difference between revisions

From BigID Developer Portal
No edit summary
Tag: Reverted
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
    .info {
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        background: #f091ca;
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap');
        padding: 3px;
        font-weight: 600;
        color: #ffff;
    }


    #mw-content-text.mw-body-content.mw-content-ltr {
        margin-left: auto !important;
    }


    #bodyContent.citizen-body {
    /* Light Mode Styles (Default) */
min-width:0px !important;
    :root {
max-width:900px;
        --bg-color: #ffffff;
}
        --text-primary: #1a202c;
        --text-secondary: #4a5568;
        --section-bg: #f7fafc;
        --input-bg: #fff;
        --input-border: #e2e8f0;
        --input-text: #2d3748;
        --highlight-bg: #bee3f8;
        --highlight-text: #2c5282;
        --card-bg: #ffffff;
        --card-text-primary: #1a202c;
        --card-text-secondary: #4a5568;
        --grid-line-color: rgba(0, 0, 0, 0.04);
        --watermark-opacity: 0.05;
    }


    .mw-body-header {
    .info {
        display: none !important
        background-color: var(--highlight-bg);
    }
        color: var(--highlight-text);
        padding: 3px 5px;
        font-weight: 500;
        border-radius: 4px;
        opacity: 0;
        animation: fadeIn 0.5s ease forwards;
    }


    #contentSub {
    #mw-content-text.mw-body-content.mw-content-ltr {
        display: none
        margin-left: auto !important;
    }
    }


    #bodyContent {
    #bodyContent.citizen-body {
        min-width: 80vw !important;
        min-width: 0px !important;
    }
        max-width: 80vw;
    }


    #why h2 {
    .mw-body-header, #contentSub {
        margin: 0px;
        display: none !important;
    }
    }


    main {
    #bodyContent {
        font-family: 'Archivo', sans-serif;
        min-width: 80vw !important;
        -moz-osx-font-smoothing: grayscale;
    }
        -webkit-font-smoothing: antialiased;
        display: flex;
        margin: auto;
        font-size: 16px;
        align-content: center;
        flex-direction: column;
    }


    #mega {
    main {
        margin: 0px;
        font-family: 'Inter', sans-serif;
        align-items: center;
        -moz-osx-font-smoothing: grayscale;
        justify-content: space-between;
        -webkit-font-smoothing: antialiased;
        padding-top: 5vh;
        display: flex;
    }
        margin: auto;
        font-size: 16px;
        align-content: center;
        flex-direction: column;
        background-color: var(--bg-color);
        color: var(--text-secondary);
    }


    #mega h1 {
    #mega {
        font-size: 5em;
        position: relative;
        margin-top: 0px;
        padding: 15vh 2vw;
        margin-bottom: 3vh;
        text-align: center;
    }
        border-radius: 12px;
        margin-top: 2rem;
        background: linear-gradient(315deg, rgba(45, 55, 72, 0.9), rgba(74, 85, 104, 0.9), rgba(43, 108, 176, 0.9));
        background-size: 400% 400%;
        animation: gradient-animation 20s ease infinite;
        overflow: hidden;
    }
   
    #code-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
   
    .code-snippet {
        position: absolute;
        color: rgba(255, 255, 255, 0.15);
        font-family: 'Fira Code', monospace;
        font-size: 14px;
        white-space: nowrap;
        animation: slide-code linear infinite;
        user-select: none;
    }


    main h1 {
    @keyframes slide-code {
        font-size: 2.5em;
        from { transform: translateY(100vh); }
    }
        to { transform: translateY(-20vh); }
    }


    #mega h2 {
        font-weight: 300;
        font-size: 1.20em;
    }


    #mega>.title {
    #mega .title {
        padding-right: 2vw;
        position: relative;
        flex: .4
        z-index: 1;
    }
    }


    main section a:link {
    #mega h1 {
        text-decoration: none;
        font-size: 4.5em;
        color: #fff;
        font-weight: 700;
        font-weight: 600;
        margin-top: 0px;
        display: inline-block;
        margin-bottom: 2vh;
    }
        color: #fff;
    }


    main section a:visited {
    main h1 {
        color: inherit;
        font-size: 2.5em;
    }
        font-weight: 700;
    }


    main section a:hover {
    #mega h2 {
        opacity: .7;
        font-weight: 300;
    }
        font-size: 1.5em;
        color: rgba(255, 255, 255, 0.85);
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }


    main #mega .links {
    #mega>.title {
        display: flex;
        padding-right: 0;
        margin-top: 4vh;
        flex: 1;
        width: 80%;
    }
        margin-bottom: 8vh;
    }


    main #mega .links a {
    main #mega .links a {
        padding: 10px 20px;
        padding: 12px 28px;
        border-radius: 10px;
        border-radius: 8px;
        background: #4bb6e8;
        background: linear-gradient(90deg, #4a90e2, #50e3c2);
        box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        display: inline-block;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }


    }
    main #mega .links a:hover {
        transform: translateY(-2px);
        opacity: .85;
    }


    main #headerimg {
    main #mega .links {
        width: 100%;
        display: flex;
    }
        margin-top: 5vh;
        margin-bottom: 0;
        justify-content: center;
    }


    main #why svg {
    main .row {
        width: 7vw;
        flex-direction: row;
        margin: 2vh 2vw;
        display: flex;
    }
        align-items: stretch;
        padding-top: 2vh;
    }
   
    @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }


    main #why {
    main .card {
        font-size: 18px;
        position: relative;
    }
        flex-direction: column;
        border-radius: 14px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
        font-size: 18px;
        overflow: hidden;
        margin: 1vw;
        flex: 1;
        display: flex;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: var(--card-bg);
        padding: 2px;
        text-decoration: none;
    }
   
    main .card::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 0;
        margin: -2px;
        border-radius: inherit;
        background-size: 200% 200%;
        animation: gradient-animation 10s ease infinite;
    }
   
    .card.purple::before { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card.red::before { background-image: linear-gradient(135deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%); }
    .card.orange::before { background-image: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .card.blue::before { background-image: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }
   
    main .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 30px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1);
    }


    main .row {
    main .card p {
        flex-direction: row;
        color: var(--card-text-secondary);
        display: flex;
        line-height: 1.6;
        align-items: center;
    }
        padding-top: 2vh;
    }


    main .column {
    main .card h1 {
        flex-direction: column;
        margin: 0 0 1rem 0;
        display: flex;
        font-size: 2em;
    }
        font-weight: 600;
        color: var(--card-text-primary);
    }
   
    .card-footer {
        text-align: center;
        padding: 1.5vh;
        background-color: rgba(0, 0, 0, .05);
        font-weight: 600;
        margin-top: auto;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        color: var(--card-text-primary);
    }
   
    main .card-inner-content {
        position: relative;
        z-index: 1;
        background-color: var(--card-bg);
        border-radius: 12px;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
   
    main .card-inner-content::after {
        content: '';
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 90px;
        height: 90px;
        z-index: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: var(--watermark-opacity);
        transition: opacity 0.3s ease;
    }
   
    .card.purple .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' /%3E%3C/svg%3E"); }
    .card.red .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' /%3E%3C/svg%3E"); }
    .card.blue .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6 18.233m10.56-4.404L18 18.233m-12-4.404h12m-12 0a9 9 0 019-9h.096c.5 0 .905.405.905.905 0 .714-.211 1.412-.608 2.006L7.394 13.83c-.397.594-.908 1.05-1.482 1.342a9.058 9.058 0 01-1.212.323' /%3E%3C/svg%3E"); }
    .card.orange .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' /%3E%3C/svg%3E"); }


    main #getStarted>h1 {
        text-align: center;
    }


    main .card.purple {
    main .card>.card-inner-content>.content {
        background-image: linear-gradient(124deg, rgb(215, 10, 132), rgb(81, 18, 127));
        position: relative;
    }
        z-index: 1;
        padding: 2vw;
        padding-bottom: 0px;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        text-align: left;
    }


    main .card.red {
    #classify {
        background-image: linear-gradient(124deg, rgb(200, 56, 53), rgb(155, 35, 85));
        position: relative;
    }
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4rem 0;
        padding: 40px;
        background-color: var(--section-bg);
        border-radius: 12px;
        gap: 5vw;
        border: 1px solid var(--input-border);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }
   
    #classify h1 {
        color: var(--text-primary);
        margin-top: 0;
    }
   
    #classify p {
        color: var(--text-secondary);
        line-height: 1.7;
    }


    main .card.orange {
    #classify .try {
        background-image: linear-gradient(124deg, rgb(255, 163, 55), rgb(188, 67, 34));
        display: flex;
    }
        flex-direction: column;
        min-width: 350px;
    }


    main .card.blue {
    #classify .try #tryData {
        background-image: linear-gradient(124deg, rgb(78, 194, 135), rgb(41, 151, 239));
        background-color: var(--input-bg);
    }
        padding: 18px;
        border-radius: 8px;
        height: 130px;
        color: var(--input-text);
        border: 1px solid var(--input-border);
        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
        font-size: 1.05em;
        line-height: 1.6;
    }


    main .card {
    #classify .try button {
        flex-direction: column;
        padding: 12px 24px;
        border-radius: 10px;
        border-radius: 8px;
        box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18);
        background: #2b6cb0;
        color: #fff;
        box-shadow: 0 4px 14px 0 rgba(43, 108, 176, 0.39);
        font-size: 18px;
        font-weight: 600;
        overflow: hidden;
        color: #fff;
        margin: 1vw;
        border: 0px;
        flex: 1;
        width: 100%;
    }
        margin-top: 1.5vh;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }
   
    #classify .try button:hover {
        transform: translateY(-2px);
        background: #2c5282;
    }
   
    #classify .try button.processing {
        background: #2c5282;
        cursor: not-allowed;
    }
   
    /* Dark Mode Styles */
    .skin-citizen-dark {
        --bg-color: #1a202c;
        --text-primary: #f7fafc;
        --text-secondary: #a0aec0;
        --section-bg: #2d3748;
        --input-bg: #4a5568;
        --input-border: #4a5568;
        --input-text: #f7fafc;
        --highlight-bg: #2b6cb0;
        --highlight-text: #bee3f8;
        --card-bg: #1A202C;
        --card-text-primary: #ffffff;
        --card-text-secondary: rgba(255, 255, 255, 0.8);
        --grid-line-color: rgba(255, 255, 255, 0.06);
        --watermark-opacity: 0.1;
    }
   
    .skin-citizen-dark #classify {
        background-image: none;
        border: 1px solid var(--input-border);
        box-shadow: none;
    }
   
    .skin-citizen-dark main .card {
        box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 6px 6px rgba(0,0,0,0.4);
    }


    main .card p {
    .skin-citizen-dark main .card .card-footer {
        color: #fff
        background-color: rgba(255, 255, 255, .1);
    }
    }


    main .card h1 {
    .skin-citizen-dark main .card p,
        margin: 0px;
    .skin-citizen-dark main .card h1 {
        font-size: 2em;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        color: #fff;
    }
    }
   
    .skin-citizen-dark .card.purple .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.red .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.blue .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6 18.233m10.56-4.404L18 18.233m-12-4.404h12m-12 0a9 9 0 019-9h.096c.5 0 .905.405.905.905 0 .714-.211 1.412-.608 2.006L7.394 13.83c-.397.594-.908 1.05-1.482 1.342a9.058 9.058 0 01-1.212.323' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.orange .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' /%3E%3C/svg%3E"); }


    main .card a:link {
        display: block;
        text-align: center;
        padding: 2vh;
        background-color: rgba(0, 0, 0, .4);
        font-weight: 600;
    }


    main .card a:hover {
    /* Scroll Animations */
        opacity: .8;
    .animate-on-scroll {
    }
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }


    main .card>.content {
    .animate-on-scroll.is-visible {
        padding: 1.5vw;
        opacity: 1;
        padding-bottom: 0px;
        transform: translateY(0);
        min-height: 250px;
    }
    }
   
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }


    @media only screen and (max-width: 600px) {
        #mega {
            text-align: center;
            flex-direction: column-reverse;
        }


        #mega .links {
    @media only screen and (max-width: 768px) {
            margin: auto;
        #mega, #classify.row {
            text-align: center;
            text-align: center;
            align-content: center;
            flex-direction: column;
            justify-content: space-evenly;
        }
            padding-bottom: 20px
        }


        #mega .title {
        #getStarted .row {
            padding: 0px;
            flex-direction: column;
        }
            align-items: center;
        }
       
        #mega .title, #classify .try {
            padding: 0;
        }


        main {
        #mega h2 {
            width: auto;
            margin-left: auto;
            text-align: center;
            margin-right: auto;
        }
        }
       
        #mega .links {
            justify-content: center;
        }


        main .row {
        main .card {
            flex-direction: column;
            margin: 15px 0;
        }
            width: 95%;
            max-width: 450px;
        }


        main .chevron {
        main .card>.card-inner-content>.content {
            display: none;
            padding: 24px;
        }
            min-height: auto;
 
        }
        main .card>.content {
    }
            padding: 20px;
</style>
            min-height: 0px;
<main>
        }
    <section id="mega">
        <div id="code-background"></div>
        <div class="title">
            <h1>Discover</h1>
            <h2>Bring enterprise-scale data intelligence to your application</h2>
            <p class="links"><a href="Get_Started">Get Started</a></p>
        </div>
    </section>
    <section id="classify" class="row custom_bigid_notes">
        <div>
            <h1>See into your data</h1>
            <p>BigID allows you to sort through large swaths of data to see what really matters. Using hundreds of
                machine learning, NLP and regex classifiers, you can classify any data, anywhere. Try it on the right.
            </p>
        </div>
        <div class="try">
            <div contenteditable="true" id="tryData">Hello! Can you please process payment for [email protected] to
                4199006507426062? Thank you!</div>
            <button id="discoverBtn" onclick="discover()">Discover</button>
        </div>
    </section>
    <section id="getStarted">
        <div class="row">
            <a href="Apps" class="card purple animate-on-scroll">
                <div class="card-inner-content">
                    <div class="content">
                        <h1>Apps</h1>
                        <p>Add custom logic and screens to your BigID system.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                </div>
            </a>
            <a href="BigID_API" class="card red animate-on-scroll">
                <div class="card-inner-content">
                    <div class="content">
                        <h1>REST API</h1>
                        <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                </div>
            </a>
            <a href="Connectors" class="card blue animate-on-scroll">
                <div class="card-inner-content">
                    <div class="content">
                        <h1>Connectors</h1>
                        <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                </div>
            </a>
            <a href="LLMs" class="card orange animate-on-scroll">
                <div class="card-inner-content">
                    <div class="content">
                        <h1>LLMs</h1>
                        <p>Interacting with BigID using MCP.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                </div>
            </a>
        </div>
    </section>
</main>
<script>
    async function discover() {
        const button = document.getElementById('discoverBtn');
        const originalText = button.innerText;
       
        button.innerText = 'Processing...';
        button.classList.add('processing');
        button.disabled = true;


        main .card {
        try {
            margin: 10px 0px;
            let req = await window.fetch('https://classify.bigid.tools', {
            box-shadow: none;
                method: 'POST',
        }
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({ text: document.getElementById('tryData').innerText })
            });
            let json = await req.json();
            let highlighter = json.map((item) => {
                return { start: item.pos - 1, end: item.end - 1, word: item.word }
            });
            highlighter = highlighter.reduce(function (p, c) {
                if (!p.some(function (el) { return el.end === c.end; })) p.push(c);
                return p;
            }, []);
            highlighter = highlighter.reduce(function (p, c) {
                if (!p.some(function (el) { return el.start === c.start; })) p.push(c);
                return p;
            }, []);
            highlighter = highlighter.sort((a, b) => b.end - a.end);
           
            let text = document.getElementById('tryData').innerText;
            for (high of highlighter) {
                text = text.substring(0, high.start) + "<span class='info' title='" + high.word + "'>" + text.substring(high.start, high.end) + "</span>" + text.substring(high.end);
            }
            document.getElementById('tryData').innerHTML = text;
        } catch (error) {
            console.error("Discovery failed:", error);
        } finally {
            button.innerText = originalText;
            button.classList.remove('processing');
            button.disabled = false;
        }
    }


        main #why svg {
    const scrollElements = document.querySelectorAll(".animate-on-scroll");
            width: 30vw;
        }
        #classify .try { padding-left:0px !important;}
        #classify {margin:0px !important;}
    }


    ol.special {
    const elementInView = (el, dividend = 1) => {
        list-style: none;
        const elementTop = el.getBoundingClientRect().top;
        margin-left: 0px;
        return (
    }
            elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
        );
    };


    ol li {
    const displayScrollElement = (element) => {
        display: inline-block;
        element.classList.add("is-visible");
        padding: 10px;
    };
        background-color: #334450;
        border-radius: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }


    .skin-citizen-light ol li {
    const hideScrollElement = (element) => {
        background-color: #e3e3e3;
        element.classList.remove("is-visible");
    }
    };


    #classify {
    const handleScrollAnimation = () => {
        display: flex;
        scrollElements.forEach((el) => {
        justify-content: space-between;
            if (elementInView(el, 1.25)) {
        align-items: center;
                displayScrollElement(el);
        margin-top: 2.4rem;
            }
        padding: 25px;
        });
    }
    }


    #classify .try {
    window.addEventListener("scroll", () => {
        display: flex;
        handleScrollAnimation();
        flex-direction: column;
    });
        padding-left: 10vw;
   
        min-width: 300px;
    // Trigger on load as well
    }
    handleScrollAnimation();


    #classify .try #tryData {
    function createCodeBackground() {
        background-color: #fff;
        const container = document.getElementById('code-background');
        padding: 10px;
        if (!container) return;
        border-radius: 10px;
       
        overflow: scroll;
        const snippets = [
        height: 90px;
            "const classify = () => {}",
        color: #54595d;
            "import { BigID } from 'bigid-sdk';",
    }
            "let api_token = '...';",
            "discover.scan({ target: 's3' });",
            "function onResult(data) { console.log(data); }",
            "new Connector('kafka');",
            "fetch('/api/v1/dsar')",
            "// Initialize the application",
            "const port = 3000;",
            "app.listen(port);",
            "main.card { display: flex; }",
            "opacity: 1; transform: translateY(0);"
        ];


    #classify .try button {
        const snippetCount = 30;
        padding: 10px 20px;
        border-radius: 10px;
        background: #4bbf8f;
        font-weight: 600;
        color: #fff;
        border: 0px;
        width: 100%;
        margin-top: 1vh;
    }


    #classify h1 {
        for (let i = 0; i < snippetCount; i++) {
        margin: 0px;
            const snippetEl = document.createElement('div');
    }
            snippetEl.classList.add('code-snippet');
</style>
            snippetEl.innerText = snippets[Math.floor(Math.random() * snippets.length)];
<main>
           
    <section id="mega" class="row">
            snippetEl.style.left = `${Math.random() * 100}%`;
        <div class="title">
            snippetEl.style.top = `${Math.random() * 100}%`;
            <h1>Discover</h1>
            snippetEl.style.animationDuration = `${10 + Math.random() * 15}s`;
            <h2>Bring enterprise-scale data intelligence to your application</h2>
            snippetEl.style.animationDelay = `${Math.random() * 10}s`;
            <p class="links"><a href="Get_Started" style="color:#fff;">Get Started</a></p>
           
        </div>
            container.appendChild(snippetEl);
        <div style="flex:1"><img id="headerimg" src="https://wiki-images.bigid.tools/cdn/main.svg" /></div>
        }
    </section>
    }
    <section id="classify" class="row custom_bigid_notes">
        <div>
            <h1>See into your data</h1>
            <p>BigID allows you to sort through large swaths of data to see what really matters. Using hundreds of
                machine learning, NLP and regex classifiers, you can classify any data, anywhere. Try it on the right.
            </p>
        </div>
        <div class="try">
            <div contenteditable="true" id="tryData">Hello! Can you please process payment for me@example.com to
                4199006507426062? Thank you!</div>
            <button onclick="discover()">Discover</button>
        </div>
    </section>
    <section id="getStarted">
        <h1>Start Developing</h1>
        <div class="row">
            <div class="card purple " style="margin-left:0px;">
                <div class="content ">
                    <h1>Apps</h1>
                    <p>Add custom logic and screens to your BigID system.</p>
                </div>
                <a href="Apps">Learn more</a>
            </div>
            <div class="card red ">
                <div class="content ">
                    <h1>REST API</h1>
                    <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                </div>
                <a href="BigID_API">Learn More</a>
            </div>
            <div class="card blue ">
                <div class="content ">
                    <h1>Connectors</h1>
                    <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                </div>
                <a href="Connectors">Learn More</a>
            </div>
            <div class="card orange" style="margin-right:0px;">
                <div class="content ">
                    <h1>LLMs</h1>
                    <p>Interacting with BigID using MCP.</p>
                </div>
                <a href="LLM">Learn More</a>
            </div>
        </div>
    </section>
    <section>
        <h1>Popular Articles:</h1>


</html>
    createCodeBackground();
{{Special:TopTenPages/1/10}}
<html>
</section>
</main>
<script>
    async function discover() {
        let req = await window.fetch('https://classify.bigid.tools', {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({ text: document.getElementById('tryData').innerText })
        });
        let json = await req.json();
        let highlighter = json.map((item) => {
            return { start: item.pos - 1, end: item.end - 1, word: item.word }
        });
        highlighter = highlighter.reduce(function (p, c) {
            if (!p.some(function (el) { return el.end === c.end; })) p.push(c);
            return p;
        }, []);
        highlighter = highlighter.reduce(function (p, c) {
            if (!p.some(function (el) { return el.start === c.start; })) p.push(c);
            return p;
        }, []);
        highlighter = highlighter.sort((a, b) => b.end - a.end);
        console.log(highlighter);
        let text = document.getElementById('tryData').innerText;
        for (high of highlighter) {
            text = text.substring(0, high.start) + "<span class='info' title='" + high.word + "'>" + text.substring(high.start, high.end) + "</span>" + text.substring(high.end);
        }
        document.getElementById('tryData').innerHTML = text;
    }


</script>
</script>


</html>
</html>
{{#description2:Get started adding BigID's data discovery to your application with tutorials, samples, and
{{#description2:Get started adding BigID's data discovery to your application with tutorials, samples, and
documentation}}
documentation}}

Latest revision as of 20:11, 19 August 2025

Discover

Bring enterprise-scale data intelligence to your application

Get Started

See into your data

BigID allows you to sort through large swaths of data to see what really matters. Using hundreds of machine learning, NLP and regex classifiers, you can classify any data, anywhere. Try it on the right.

Hello! Can you please process payment for [email protected] to 4199006507426062? Thank you!

Apps

Add custom logic and screens to your BigID system.

Learn more

REST API

Manage BigID programmatically. Scan data, run SARs, and more through code.

Learn more

Connectors

Scan any system, anywhere. Write your own connector in any programming language.

Learn more

LLMs

Interacting with BigID using MCP.

Learn more

Retrieved from "https://developer.bigid.com/index.php?title=Home&oldid=1423"