BigID Developer Portal
Home: Difference between revisions

Home: Difference between revisions

From BigID Developer Portal
No edit summary
No edit summary
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
    /* Light Mode Styles (Default) */
    :root {
        --bg-color: #ffffff;
        --text-primary: #1a202c;
        --text-secondary: #4a5568;
        --section-bg: #f7fafc;
        --input-bg: #fff;
        --input-border: #e2e8f0;
        --input-text: #2d3748;
    }
     .info {
     .info {
         background: #f091ca;
         background: #f091ca;
Line 6: Line 19:
         font-weight: 600;
         font-weight: 600;
         color: #ffff;
         color: #ffff;
        border-radius: 4px;
        opacity: 0;
        animation: fadeIn 0.5s ease forwards;
     }
     }


Line 13: Line 29:


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


     .mw-body-header {
     .mw-body-header, #contentSub {
         display: none !important
         display: none !important;
    }
 
    #contentSub {
        display: none
     }
     }


     #bodyContent {
     #bodyContent {
         min-width: 80vw !important;
         min-width: 80vw !important;
    }
    #why h2 {
        margin: 0px;
     }
     }


     main {
     main {
         font-family: 'Archivo', sans-serif;
         font-family: 'Inter', sans-serif;
         -moz-osx-font-smoothing: grayscale;
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         -webkit-font-smoothing: antialiased;
Line 42: Line 50:
         align-content: center;
         align-content: center;
         flex-direction: column;
         flex-direction: column;
        background-color: var(--bg-color);
        color: var(--text-secondary);
     }
     }


     #mega {
     #mega {
         margin: 0px;
         padding: 15vh 2vw;
         align-items: center;
         text-align: center;
         justify-content: space-between;
        border-radius: 12px;
         padding-top: 5vh;
         margin-top: 2rem;
        background: linear-gradient(315deg, #2d3748, #4a5568, #2b6cb0);
         background-size: 400% 400%;
        animation: gradient-animation 20s ease infinite;
     }
     }


     #mega h1 {
     #mega h1 {
         font-size: 5em;
         font-size: 4.5em;
        font-weight: 700;
         margin-top: 0px;
         margin-top: 0px;
         margin-bottom: 3vh;
         margin-bottom: 2vh;
        color: #fff;
     }
     }


     main h1 {
     main h1 {
         font-size: 2.5em;
         font-size: 2.5em;
        font-weight: 700;
     }
     }


     #mega h2 {
     #mega h2 {
         font-weight: 300;
         font-weight: 300;
         font-size: 1.20em;
         font-size: 1.5em;
        color: rgba(255, 255, 255, 0.85);
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
     }
     }


     #mega>.title {
     #mega>.title {
         padding-right: 2vw;
         padding-right: 0;
         flex: .4
         flex: 1;
     }
     }


     main section a:link {
     main section a:link, main section a:visited {
         text-decoration: none;
         text-decoration: none;
         color: #fff;
         color: #fff;
         font-weight: 600;
         font-weight: 600;
         display: inline-block;
         display: inline-block;
    }
         transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
    main section a:visited {
         color: inherit;
     }
     }


     main section a:hover {
     main section a:hover {
         opacity: .7;
        transform: translateY(-2px);
         opacity: .85;
     }
     }


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


     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);
     }
     }


     main #headerimg {
     main #headerimg {
         width: 100%;
         width: 100%;
    }
         max-width: 500px;
 
    main #why svg {
         width: 7vw;
        margin: 2vh 2vw;
    }
 
    main #why {
        font-size: 18px;
     }
     }


Line 118: Line 128:
         align-items: center;
         align-items: center;
         padding-top: 2vh;
         padding-top: 2vh;
    }
    main .column {
        flex-direction: column;
        display: flex;
     }
     }


     main #getStarted>h1 {
     main #getStarted>h1 {
         text-align: center;
         text-align: center;
        margin-bottom: 4vh;
        color: var(--text-primary);
    }
   
    @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
     }
     }


     main .card.purple {
     main .card.purple {
         background-image: linear-gradient(124deg, rgb(215, 10, 132), rgb(81, 18, 127));
         background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
     }


     main .card.red {
     main .card.red {
         background-image: linear-gradient(124deg, rgb(200, 56, 53), rgb(155, 35, 85));
         background-image: linear-gradient(135deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
     }
     }


     main .card.orange {
     main .card.orange {
         background-image: linear-gradient(124deg, rgb(255, 163, 55), rgb(188, 67, 34));
         background-image: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
     }
     }


     main .card.blue {
     main .card.blue {
         background-image: linear-gradient(124deg, rgb(78, 194, 135), rgb(41, 151, 239));
         background-image: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
     }
     }


     main .card {
     main .card {
         flex-direction: column;
         flex-direction: column;
         border-radius: 10px;
         border-radius: 12px;
         box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18);
         box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
         color: #fff;
         color: #fff;
         font-size: 18px;
         font-size: 18px;
         overflow: hidden;
         overflow: hidden;
         margin: 1.5vw;
         margin: 1vw;
         flex: 1;
         flex: 1;
        display: flex;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-size: 200% 200%;
        animation: gradient-animation 15s ease infinite;
    }
   
    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 .card p {
     main .card p {
         color: #fff
         color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
     }
     }


     main .card h1 {
     main .card h1 {
         margin: 0px;
         margin: 0 0 1rem 0;
         font-size: 2em;
         font-size: 2em;
        font-weight: 600;
         color: #fff;
         color: #fff;
        display: flex;
        align-items: center;
    }
   
    main .card h1 .card-icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        opacity: 0.8;
     }
     }


Line 169: Line 202:
         display: block;
         display: block;
         text-align: center;
         text-align: center;
         padding: 2vh;
         padding: 1.5vh;
         background-color: rgba(0, 0, 0, .4);
         background-color: rgba(0, 0, 0, .25);
         font-weight: 600;
         font-weight: 600;
    }
         margin-top: auto;
 
    main .card a:hover {
         opacity: .8;
     }
     }


     main .card>.content {
     main .card>.content {
         padding: 1.5vw;
         padding: 2vw;
         padding-bottom: 0px;
         padding-bottom: 0px;
         min-height: 280px;
         min-height: 250px;
    }
         display: flex;
 
         flex-direction: column;
    @media only screen and (max-width: 600px) {
         #mega {
            text-align: center;
            flex-direction: column-reverse;
        }
 
        #mega .links {
            margin: auto;
            text-align: center;
            align-content: center;
            justify-content: space-evenly;
            padding-bottom: 20px
        }
 
        #mega .title {
            padding: 0px;
        }
 
        main {
            width: auto;
            text-align: center;
         }
 
        main .row {
            flex-direction: column;
        }
 
        main .chevron {
            display: none;
        }
 
        main .card>.content {
            padding: 20px;
            min-height: 0px;
        }
 
        main .card {
            margin: 10px 0px;
            box-shadow: none;
        }
 
        main #why svg {
            width: 30vw;
        }
        #classify .try { padding-left:0px !important;}
        #classify {margin:0px !important;}
    }
 
    ol.special {
        list-style: none;
        margin-left: 0px;
    }
 
    ol li {
        display: inline-block;
        padding: 10px;
        background-color: #334450;
        border-radius: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
 
    .skin-citizen-light ol li {
        background-color: #e3e3e3;
     }
     }


     #classify {
     #classify {
         display: flex;
         display: flex;
         justify-content: space-between;
         justify-content: center;
         align-items: center;
         align-items: center;
         margin-top: 2.4rem;
        margin: 4rem 0;
         padding: 25px;
        padding: 40px;
        background-color: var(--section-bg);
        border-radius: 12px;
        gap: 5vw;
    }
   
    #classify h1 {
        color: var(--text-primary);
         margin-top: 0;
    }
   
    #classify p {
        color: var(--text-secondary);
         line-height: 1.7;
     }
     }


Line 261: Line 240:
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
        padding-left: 10vw;
         min-width: 350px;
         min-width: 300px;
     }
     }


     #classify .try #tryData {
     #classify .try #tryData {
         background-color: #fff;
         background-color: var(--input-bg);
         padding: 10px;
         padding: 15px;
         border-radius: 10px;
         border-radius: 8px;
         overflow: scroll;
        height: 120px;
         height: 90px;
         color: var(--input-text);
         color: #54595d;
         border: 1px solid var(--input-border);
         box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
     }
     }


     #classify .try button {
     #classify .try button {
         padding: 10px 20px;
         padding: 12px 24px;
         border-radius: 10px;
         border-radius: 8px;
         background: #4bbf8f;
         background: #48bb78;
         font-weight: 600;
         font-weight: 600;
         color: #fff;
         color: #fff;
         border: 0px;
         border: 0px;
         width: 100%;
         width: 100%;
         margin-top: 1vh;
         margin-top: 1.5vh;
        cursor: pointer;
        transition: background-color 0.2s ease;
        position: relative;
    }
   
    #classify .try button:hover {
        background: #38a169;
     }
     }
   
    #classify .try button.processing {
        background: #38a169;
        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: #2d3748;
        --input-text: #f7fafc;
    }
   
    .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);
    }
    /* Scroll Animations */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
   
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @media only screen and (max-width: 768px) {
        #mega, .row {
            text-align: center;
            flex-direction: column;
        }
       
        #mega .title, #classify .try {
            padding: 0;
        }
        #mega h2 {
            margin-left: auto;
            margin-right: auto;
        }
       
        #mega .links {
            justify-content: center;
        }


    #classify h1 {
        main .row {
         margin: 0px;
            flex-direction: column;
        }
 
         main .card {
            margin: 15px 0;
            width: 100%;
        }
     }
     }
</style>
</style>
<main>
<main>
     <section id="mega" class="row">
     <section id="mega">
         <div class="title">
         <div class="title">
             <h1>Discover</h1>
             <h1>Discover</h1>
             <h2>Bring enterprise-scale data intelligence to your application</h2>
             <h2>Bring enterprise-scale data intelligence to your application</h2>
             <p class="links"><a href="Get_Started" style="color:#fff;">Get Started</a></p>
             <p class="links"><a href="Get_Started">Get Started</a></p>
         </div>
         </div>
        <div style="flex:1"><img id="headerimg" src="https://wiki-images.bigid.tools/cdn/main.svg" /></div>
     </section>
     </section>
     <section id="classify" class="row custom_bigid_notes">
     <section id="classify" class="row custom_bigid_notes">
Line 308: Line 356:
             <div contenteditable="true" id="tryData">Hello! Can you please process payment for [email protected] to
             <div contenteditable="true" id="tryData">Hello! Can you please process payment for [email protected] to
                 4199006507426062? Thank you!</div>
                 4199006507426062? Thank you!</div>
             <button onclick="discover()">Discover</button>
             <button id="discoverBtn" onclick="discover()">Discover</button>
         </div>
         </div>
     </section>
     </section>
Line 314: Line 362:
         <h1>Start Developing</h1>
         <h1>Start Developing</h1>
         <div class="row">
         <div class="row">
             <div class="card purple " style="margin-left:0px;">
             <div class="card purple animate-on-scroll">
                 <div class="content ">
                 <div class="content">
                     <h1>Apps</h1>
                     <h1>
                        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path 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" />
                        </svg>
                        Apps
                    </h1>
                     <p>Add custom logic and screens to your BigID system.</p>
                     <p>Add custom logic and screens to your BigID system.</p>
                 </div>
                 </div>
                 <a href="Apps">Learn more</a>
                 <a href="Apps">Learn more</a>
             </div>
             </div>
             <div class="card red ">
             <div class="card red animate-on-scroll">
                 <div class="content ">
                 <div class="content">
                     <h1>REST API</h1>
                     <h1>
                        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                        </svg>
                        REST API
                    </h1>
                     <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                     <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                 </div>
                 </div>
                 <a href="BigID_API">Learn More</a>
                 <a href="BigID_API">Learn More</a>
             </div>
             </div>
             <div class="card blue ">
             <div class="card blue animate-on-scroll">
                 <div class="content ">
                 <div class="content">
                     <h1>Connectors</h1>
                     <h1>
                        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        Connectors
                    </h1>
                     <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                     <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                 </div>
                 </div>
                 <a href="Connectors">Learn More</a>
                 <a href="Connectors">Learn More</a>
             </div>
             </div>
             <div class="card orange" style="margin-right:0px;">
             <div class="card orange animate-on-scroll">
                 <div class="content ">
                 <div class="content">
                     <h1>LLMs</h1>
                     <h1>
                        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path 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" />
                        </svg>
                        LLMs
                    </h1>
                     <p>Interacting with BigID using MCP.</p>
                     <p>Interacting with BigID using MCP.</p>
                 </div>
                 </div>
Line 351: Line 419:
<script>
<script>
     async function discover() {
     async function discover() {
         let req = await window.fetch('https://classify.bigid.tools', {
         const button = document.getElementById('discoverBtn');
            method: 'POST',
        const originalText = button.innerText;
            headers: {
       
                'content-type': 'application/json'
        button.innerText = 'Processing...';
            },
        button.classList.add('processing');
            body: JSON.stringify({ text: document.getElementById('tryData').innerText })
        button.disabled = true;
        });
 
        let json = await req.json();
        try {
        let highlighter = json.map((item) => {
            let req = await window.fetch('https://classify.bigid.tools', {
            return { start: item.pos - 1, end: item.end - 1, word: item.word }
                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;
        }
    }
 
    const scrollElements = document.querySelectorAll(".animate-on-scroll");
 
    const elementInView = (el, dividend = 1) => {
        const elementTop = el.getBoundingClientRect().top;
        return (
            elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
        );
    };
 
    const displayScrollElement = (element) => {
        element.classList.add("is-visible");
    };
 
    const hideScrollElement = (element) => {
        element.classList.remove("is-visible");
    };
 
    const handleScrollAnimation = () => {
        scrollElements.forEach((el) => {
            if (elementInView(el, 1.25)) {
                displayScrollElement(el);
            }
         });
         });
        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>


    window.addEventListener("scroll", () => {
        handleScrollAnimation();
    });
   
    // Trigger on load as well
    handleScrollAnimation();


</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}}

Revision as of 19:30, 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!

Start Developing

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

Popular Articles:

{{Special:TopTenPages/1/10}}

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