Spaces:

nguyenthanhasia
/

BIS_Reasoning_v1.0

Running

App Files Files Community

nguyenthanhasia commited on Jun 10

Commit

f3cdc9d

verified ·

1 Parent(s): d20d2d1

Upload 7 files

Browse files

Files changed (8) hide show

.gitattributes +2 -0
accuracy.png +0 -0
combined_analysis.png +3 -0
english_retest.png +0 -0
example.png +3 -0
index.html +362 -18
script.js +322 -0
styles.css +774 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+combined_analysis.png filter=lfs diff=lfs merge=lfs -text
+example.png filter=lfs diff=lfs merge=lfs -text

accuracy.png ADDED Viewed

combined_analysis.png ADDED Viewed

Git LFS Details

SHA256: 46a29e285fe2e7b07af43ab64c584fcd2a3268d99cf2178cef5d2340ca3c3eb5
Pointer size: 131 Bytes
Size of remote file: 844 kB

english_retest.png ADDED Viewed

example.png ADDED Viewed

Git LFS Details

SHA256: d606c650805695d262c838eb94f1063c7fee383cba93d36cbc8dd6eb26d50de2
Pointer size: 132 Bytes
Size of remote file: 2.29 MB

index.html CHANGED Viewed

@@ -1,19 +1,363 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BIS Reasoning 1.0 - Japanese Benchmark for Belief-Inconsistent Syllogistic Reasoning</title>
+    <meta name="description" content="The first large-scale Japanese dataset for evaluating belief-inconsistent syllogistic reasoning in large language models">
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="nav-logo">
+                <h2>BIS Reasoning 1.0</h2>
+            </div>
+            <ul class="nav-menu">
+                <li><a href="#home" class="nav-link">Home</a></li>
+                <li><a href="#abstract" class="nav-link">Abstract</a></li>
+                <li><a href="#dataset" class="nav-link">Dataset</a></li>
+                <li><a href="#results" class="nav-link">Results</a></li>
+                <li><a href="#resources" class="nav-link">Resources</a></li>
+            </ul>
+            <div class="hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="hero">
+        <div class="hero-container">
+            <div class="hero-content">
+                <h1 class="hero-title">
+                    BIS Reasoning 1.0
+                    <span class="hero-subtitle">The First Large-Scale Japanese Benchmark for Belief-Inconsistent Syllogistic Reasoning</span>
+                </h1>
+                <p class="hero-description">
+                    Evaluating the logical reasoning capabilities of Large Language Models when faced with conclusions that contradict common beliefs
+                </p>
+                <div class="hero-stats">
+                    <div class="stat-item">
+                        <span class="stat-number" data-target="5000">0</span>
+                        <span class="stat-label">Syllogistic Problems</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number" data-target="8">0</span>
+                        <span class="stat-label">LLMs Evaluated</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number" data-target="46">0</span>
+                        <span class="stat-label">Semantic Categories</span>
+                    </div>
+                </div>
+                <div class="hero-buttons">
+                    <a href="#dataset" class="btn btn-primary">Explore Dataset</a>
+                    <a href="#results" class="btn btn-secondary">View Results</a>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="syllogism-example">
+                    <div class="premise">
+                        <span class="premise-label">Premise 1:</span>
+                        <span class="premise-text">All charcoal is processed biomass fuel</span>
+                    </div>
+                    <div class="premise">
+                        <span class="premise-label">Premise 2:</span>
+                        <span class="premise-text">All ceramics are charcoal</span>
+                    </div>
+                    <div class="conclusion">
+                        <span class="conclusion-label">Conclusion:</span>
+                        <span class="conclusion-text">All ceramics are processed biomass fuel</span>
+                        <span class="validity-badge">Logically Valid</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Abstract Section -->
+    <section id="abstract" class="abstract">
+        <div class="container">
+            <h2 class="section-title">Abstract</h2>
+            <div class="abstract-content">
+                <p class="abstract-text">
+                    We present <strong>BIS Reasoning 1.0</strong>, the first large-scale Japanese dataset of syllogistic reasoning problems explicitly designed to evaluate belief-inconsistent reasoning in large language models (LLMs). Unlike prior datasets such as NeuBAROCO and JFLD, which focus on general or belief-aligned reasoning, BIS introduces logically valid yet belief-inconsistent syllogisms to uncover reasoning biases in LLMs trained on human-aligned corpora.
+                </p>
+                <p class="abstract-text">
+                    We benchmark state-of-the-art models—including GPT models, Claude models, and leading Japanese LLMs—revealing significant variance in performance, with GPT-4o achieving 79.54% accuracy. Our analysis identifies critical weaknesses in current LLMs when handling logically valid but belief-conflicting inputs.
+                </p>
+                <div class="key-contributions">
+                    <h3>Key Contributions</h3>
+                    <div class="contributions-grid">
+                        <div class="contribution-item">
+                            <div class="contribution-icon">📊</div>
+                            <h4>First Japanese Benchmark</h4>
+                            <p>5,000 carefully curated belief-inconsistent syllogisms in Japanese</p>
+                        </div>
+                        <div class="contribution-item">
+                            <div class="contribution-icon">🤖</div>
+                            <h4>Comprehensive Evaluation</h4>
+                            <p>Systematic comparison of 8 state-of-the-art LLMs</p>
+                        </div>
+                        <div class="contribution-item">
+                            <div class="contribution-icon">🔍</div>
+                            <h4>Bias Analysis</h4>
+                            <p>Detailed investigation of reasoning biases and failure modes</p>
+                        </div>
+                        <div class="contribution-item">
+                            <div class="contribution-icon">⚕️</div>
+                            <h4>Real-world Implications</h4>
+                            <p>Critical insights for high-stakes applications</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Dataset Section -->
+    <section id="dataset" class="dataset">
+        <div class="container">
+            <h2 class="section-title">Dataset Overview</h2>
+            <div class="dataset-content">
+                <div class="dataset-description">
+                    <h3>BIS Dataset Construction</h3>
+                    <p>
+                        The BIS dataset consists of 5,000 carefully constructed syllogistic reasoning problems designed to test the robustness of logical inference in LLMs under conditions of belief inconsistency. Each example comprises two premises and one conclusion that is strictly entailed by syllogistic rules, but deliberately conflicts with general knowledge.
+                    </p>
+                </div>
+                <div class="example-section">
+                    <h3>Example from Dataset</h3>
+                    <div class="example-container">
+                        <img src="example.png" alt="Example syllogism from BIS dataset" class="example-image">
+                        <div class="example-explanation">
+                            <p>This example illustrates a belief-inconsistent syllogism where the conclusion is logically valid but contradicts common real-world beliefs about ceramics and biomass fuel.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="categories-section">
+                    <h3>Dataset Categories</h3>
+                    <div class="categories-visual">
+                        <img src="combined_analysis.png" alt="Dataset category analysis" class="categories-image">
+                        <div class="categories-description">
+                            <p>The dataset covers 46 distinct semantic categories, consolidated into 10 broader final categories including Human/Body/Senses, Animals/Organisms, Structure/Logic, and Natural Phenomena/Matter.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Results Section -->
+    <section id="results" class="results">
+        <div class="container">
+            <h2 class="section-title">Results & Analysis</h2>
+            <div class="results-overview">
+                <h3>Model Performance Overview</h3>
+                <div class="performance-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Model</th>
+                                <th>BIS Accuracy (%)</th>
+                                <th>NeuBAROCO Accuracy (%)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="top-performer">
+                                <td>GPT-4o</td>
+                                <td>79.54</td>
+                                <td>94.01</td>
+                            </tr>
+                            <tr>
+                                <td>llm-jp-3-13b</td>
+                                <td>59.86</td>
+                                <td>67.66</td>
+                            </tr>
+                            <tr>
+                                <td>GPT-4-turbo</td>
+                                <td>59.48</td>
+                                <td>67.66</td>
+                            </tr>
+                            <tr>
+                                <td>llm-jp-3-13b-instruct3</td>
+                                <td>40.90</td>
+                                <td>38.32</td>
+                            </tr>
+                            <tr>
+                                <td>stockmark-13b</td>
+                                <td>40.34</td>
+                                <td>47.90</td>
+                            </tr>
+                            <tr>
+                                <td>Claude-3-sonnet</td>
+                                <td>20.34</td>
+                                <td>78.44</td>
+                            </tr>
+                            <tr>
+                                <td>Claude-3-opus</td>
+                                <td>7.18</td>
+                                <td>61.07</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="prompt-analysis">
+                <h3>Prompt Engineering Analysis</h3>
+                <div class="prompt-charts">
+                    <div class="chart-container">
+                        <h4>Japanese Prompts - Error Recovery Rate</h4>
+                        <img src="accuracy.png" alt="Error sample accuracy by prompt type" class="chart-image">
+                    </div>
+                    <div class="chart-container">
+                        <h4>Japanese vs English Prompts Comparison</h4>
+                        <img src="english_retest.png" alt="Prompt type accuracy comparison" class="chart-image">
+                    </div>
+                </div>
+                <div class="prompt-insights">
+                    <div class="insight-item">
+                        <h4>Chain-of-Thought Effectiveness</h4>
+                        <p>Chain-of-thought prompting achieved 87% accuracy improvement on previously failed samples, demonstrating GPT-4o's latent reasoning capabilities when explicitly guided.</p>
+                    </div>
+                    <div class="insight-item">
+                        <h4>Logic-Focused Instructions</h4>
+                        <p>Prompts emphasizing logical evaluation and belief inconsistency achieved 76% improvement, showing sensitivity to explicit instructional framing.</p>
+                    </div>
+                    <div class="insight-item">
+                        <h4>Language Impact</h4>
+                        <p>English prompts showed similar patterns but with less pronounced gaps, likely due to GPT-4o's extensive English training.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Key Findings Section -->
+    <section id="findings" class="findings">
+        <div class="container">
+            <h2 class="section-title">Key Findings</h2>
+            <div class="findings-grid">
+                <div class="finding-item">
+                    <div class="finding-icon">🎯</div>
+                    <h3>Performance Variance</h3>
+                    <p>Significant variance in performance across models, with GPT-4o leading at 79.54% accuracy while Claude models underperformed dramatically on BIS despite strong NeuBAROCO results.</p>
+                </div>
+                <div class="finding-item">
+                    <div class="finding-icon">🧠</div>
+                    <h3>Belief Bias Impact</h3>
+                    <p>LLMs struggle disproportionately with belief-inconsistent problems, often overriding logical inference in favor of plausibility heuristics.</p>
+                </div>
+                <div class="finding-item">
+                    <div class="finding-icon">📝</div>
+                    <h3>Prompt Sensitivity</h3>
+                    <p>Strategic prompt design significantly impacts performance, with chain-of-thought and logic-focused instructions dramatically improving accuracy.</p>
+                    </div>
+                <div class="finding-item">
+                    <div class="finding-icon">⚖️</div>
+                    <h3>Scale vs. Reasoning</h3>
+                    <p>Model size alone doesn't guarantee reasoning performance. Training approach and architectural biases are more critical factors.</p>
+                </div>
+                <div class="finding-item">
+                    <div class="finding-icon">🏥</div>
+                    <h3>High-Stakes Implications</h3>
+                    <p>Critical vulnerabilities revealed for deployment in law, healthcare, and scientific research where logical consistency is paramount.</p>
+                </div>
+                <div class="finding-item">
+                    <div class="finding-icon">🔬</div>
+                    <h3>Future Research</h3>
+                    <p>Need for bias-resistant model design and comprehensive evaluation beyond standard benchmarks for reliable AI systems.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Resources Section -->
+    <section id="resources" class="resources">
+        <div class="container">
+            <h2 class="section-title">Resources</h2>
+            <div class="resources-content">
+                <div class="resource-links">
+                    <div class="resource-item">
+                        <h3>📊 Dataset</h3>
+                        <p>Access the complete BIS Reasoning 1.0 dataset</p>
+                        <a href="https://hf.co/datasets/nguyenthanhasia/BIS_Reasoning_v1.0" class="resource-link" target="_blank">Hugging Face Dataset</a>
+                    </div>
+                    <div class="resource-item">
+                        <h3>📄 Research Paper</h3>
+                        <p>Read the full academic paper with detailed methodology and analysis</p>
+                        <a href="https://arxiv.org/pdf/2506.06955" class="resource-link" target="_blank">Download Paper (PDF)</a>
+                    </div>
+                </div>
+                <div class="citation">
+                    <h3>Citation</h3>
+                    <div class="citation-box">
+                        <pre><code>@article{nguyen2025bis,
+      title={BIS Reasoning 1.0: The First Large-Scale Japanese Benchmark for Belief-Inconsistent Syllogistic Reasoning},
+      author={Ha-Thanh Nguyen and Chaoran Liu and Hirokazu Kiyomaru and Koichi Takeda and Yusuke Miyao and Maki Matsuda and Yusuke Oda and Pontus Stenetorp and Qianying Liu and Su Myat Noe and Hideyuki Tachibana and Kouta Nakayama and Sadao Kurohashi},
+      year={2025},
+      eprint={2506.06955},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL},
+      url={https://arxiv.org/abs/2506.06955
+}</code></pre>
+                    </div>
+                </div>
+                <div class="contact">
+                    <h3>Contact</h3>
+                    <p>For questions about the research or dataset:</p>
+                    <p><strong>Corresponding Author:</strong> Ha-Thanh Nguyen</p>
+                    <p><strong>Email:</strong> [email protected]</p>
+                    <p><strong>Affiliation:</strong> Research and Development Center for Large Language Models, NII, Tokyo, Japan</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>BIS Reasoning 1.0</h3>
+                    <p>Advancing the evaluation of logical reasoning in Large Language Models</p>
+                </div>
+                <div class="footer-section">
+                    <h4>Research</h4>
+                    <ul>
+                        <li><a href="#abstract">Abstract</a></li>
+                        <li><a href="#dataset">Dataset</a></li>
+                        <li><a href="#results">Results</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="https://hf.co/datasets/nguyenthanhasia/BIS_Reasoning_v1.0" target="_blank">Dataset</a></li>
+                        <li><a href="https://arxiv.org/pdf/2506.06955" target="_blank">Paper</a></li>
+                        <li><a href="#">Code</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 Research and Development Center for Large Language Models, NII. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,322 @@

+// DOM Content Loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile Navigation Toggle
+    const hamburger = document.querySelector('.hamburger');
+    const navMenu = document.querySelector('.nav-menu');
+    hamburger.addEventListener('click', function() {
+        hamburger.classList.toggle('active');
+        navMenu.classList.toggle('active');
+    });
+    // Close mobile menu when clicking on a link
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.addEventListener('click', () => {
+            hamburger.classList.remove('active');
+            navMenu.classList.remove('active');
+        });
+    });
+    // Smooth scrolling for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                const offsetTop = target.offsetTop - 70; // Account for fixed navbar
+                window.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    // Navbar background on scroll
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 50) {
+            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
+            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+        } else {
+            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
+            navbar.style.boxShadow = 'none';
+        }
+    });
+    // Animated counter for hero stats
+    function animateCounter(element, target, duration = 2000) {
+        let start = 0;
+        const increment = target / (duration / 16);
+        function updateCounter() {
+            start += increment;
+            if (start < target) {
+                element.textContent = Math.floor(start);
+                requestAnimationFrame(updateCounter);
+            } else {
+                element.textContent = target;
+            }
+        }
+        updateCounter();
+    }
+    // Intersection Observer for animations
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in-up');
+                // Animate counters when hero section is visible
+                if (entry.target.classList.contains('hero-stats')) {
+                    const counters = entry.target.querySelectorAll('.stat-number');
+                    counters.forEach(counter => {
+                        const target = parseInt(counter.getAttribute('data-target'));
+                        animateCounter(counter, target);
+                    });
+                }
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    // Observe elements for animation
+    const animatedElements = document.querySelectorAll('.contribution-item, .finding-item, .resource-item, .hero-stats, .example-container, .categories-visual');
+    animatedElements.forEach(el => observer.observe(el));
+    // Active navigation link highlighting
+    const sections = document.querySelectorAll('section[id]');
+    const navLinks = document.querySelectorAll('.nav-link');
+    function highlightNavigation() {
+        let current = '';
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop - 100;
+            const sectionHeight = section.clientHeight;
+            if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
+                current = section.getAttribute('id');
+            }
+        });
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === `#${current}`) {
+                link.classList.add('active');
+            }
+        });
+    }
+    window.addEventListener('scroll', highlightNavigation);
+    // Parallax effect for hero section
+    const hero = document.querySelector('.hero');
+    window.addEventListener('scroll', function() {
+        const scrolled = window.pageYOffset;
+        const rate = scrolled * -0.5;
+        if (hero) {
+            hero.style.transform = `translateY(${rate}px)`;
+        }
+    });
+    // Copy citation to clipboard
+    const citationBox = document.querySelector('.citation-box');
+    if (citationBox) {
+        citationBox.addEventListener('click', function() {
+            const text = this.textContent;
+            navigator.clipboard.writeText(text).then(function() {
+                // Show feedback
+                const feedback = document.createElement('div');
+                feedback.textContent = 'Citation copied to clipboard!';
+                feedback.style.cssText = `
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    background: #10b981;
+                    color: white;
+                    padding: 1rem 2rem;
+                    border-radius: 10px;
+                    z-index: 10000;
+                    animation: slideInRight 0.3s ease;
+                `;
+                document.body.appendChild(feedback);
+                setTimeout(() => {
+                    feedback.remove();
+                }, 3000);
+            });
+        });
+    }
+    // Add hover effects to performance table rows
+    const tableRows = document.querySelectorAll('.performance-table tbody tr');
+    tableRows.forEach(row => {
+        row.addEventListener('mouseenter', function() {
+            this.style.backgroundColor = 'rgba(37, 99, 235, 0.05)';
+            this.style.transform = 'scale(1.02)';
+            this.style.transition = 'all 0.3s ease';
+        });
+        row.addEventListener('mouseleave', function() {
+            if (!this.classList.contains('top-performer')) {
+                this.style.backgroundColor = '';
+            }
+            this.style.transform = 'scale(1)';
+        });
+    });
+  /* Ensure images are visible and properly loaded */
+    const images = document.querySelectorAll('img[src]');
+    images.forEach(img => {
+        img.style.opacity = '1';
+        img.style.transition = 'opacity 0.3s ease';
+        // Ensure image is loaded
+        if (!img.complete) {
+            img.onload = function() {
+                this.style.opacity = '1';
+            };
+        }
+    });
+    // Add scroll progress indicator
+    const progressBar = document.createElement('div');
+    progressBar.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 3px;
+        background: linear-gradient(90deg, #667eea, #764ba2);
+        z-index: 10000;
+        transition: width 0.1s ease;
+    `;
+    document.body.appendChild(progressBar);
+    window.addEventListener('scroll', function() {
+        const scrollTop = window.pageYOffset;
+        const docHeight = document.body.scrollHeight - window.innerHeight;
+        const scrollPercent = (scrollTop / docHeight) * 100;
+        progressBar.style.width = scrollPercent + '%';
+    });
+    // Add smooth fade-in effect to hero title instead of typing
+    const heroTitle = document.querySelector('.hero-title');
+    if (heroTitle) {
+        heroTitle.style.opacity = '0';
+        heroTitle.style.transform = 'translateY(30px)';
+        heroTitle.style.transition = 'opacity 1s ease, transform 1s ease';
+        setTimeout(() => {
+            heroTitle.style.opacity = '1';
+            heroTitle.style.transform = 'translateY(0)';
+        }, 300);
+    }
+    // Add floating animation to contribution items
+    const contributionItems = document.querySelectorAll('.contribution-item');
+    contributionItems.forEach((item, index) => {
+        item.style.animationDelay = `${index * 0.1}s`;
+        item.classList.add('float-animation');
+    });
+    // Add CSS for floating animation
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .float-animation {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes slideInRight {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        .nav-link.active {
+            color: var(--primary-color);
+        }
+        .nav-link.active::after {
+            width: 100%;
+        }
+    `;
+    document.head.appendChild(style);
+    // Add click effects to buttons
+    const buttons = document.querySelectorAll('.btn, .resource-link');
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            ripple.style.cssText = `
+                position: absolute;
+                width: ${size}px;
+                height: ${size}px;
+                left: ${x}px;
+                top: ${y}px;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 50%;
+                transform: scale(0);
+                animation: ripple 0.6s linear;
+                pointer-events: none;
+            `;
+            this.style.position = 'relative';
+            this.style.overflow = 'hidden';
+            this.appendChild(ripple);
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+    // Add ripple animation CSS
+    const rippleStyle = document.createElement('style');
+    rippleStyle.textContent = `
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(rippleStyle);
+    // Performance optimization: Debounce scroll events
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+    // Apply debouncing to scroll events
+    const debouncedScrollHandler = debounce(() => {
+        highlightNavigation();
+    }, 10);
+    window.addEventListener('scroll', debouncedScrollHandler);
+    console.log('BIS Reasoning 1.0 website loaded successfully!');
+});

styles.css ADDED Viewed

	@@ -0,0 +1,774 @@

+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #1e40af;
+    --accent-color: #3b82f6;
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --text-light: #9ca3af;
+    --background: #ffffff;
+    --background-alt: #f8fafc;
+    --border-color: #e5e7eb;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background-color: var(--background);
+    overflow-x: hidden;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Playfair Display', serif;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+}
+h1 { font-size: 3.5rem; }
+h2 { font-size: 2.5rem; }
+h3 { font-size: 2rem; }
+h4 { font-size: 1.5rem; }
+p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+}
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+}
+.nav-logo h2 {
+    color: var(--primary-color);
+    margin: 0;
+    font-size: 1.5rem;
+}
+.nav-menu {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+.nav-link {
+    text-decoration: none;
+    color: var(--text-primary);
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+}
+.nav-link:hover {
+    color: var(--primary-color);
+}
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--primary-color);
+    transition: width 0.3s ease;
+}
+.nav-link:hover::after {
+    width: 100%;
+}
+.hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+}
+.hamburger span {
+    width: 25px;
+    height: 3px;
+    background: var(--text-primary);
+    margin: 3px 0;
+    transition: 0.3s;
+}
+/* Hero Section */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+    opacity: 0.1;
+}
+.hero-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+}
+.hero-title {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(45deg, #ffffff, #e0e7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+.hero-subtitle {
+    display: block;
+    font-size: 1.5rem;
+    margin-top: 0.5rem;
+    opacity: 0.9;
+}
+.hero-description {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+    color: #e0e7ff;
+}
+.hero-stats {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+.stat-item {
+    text-align: center;
+}
+.stat-number {
+    display: block;
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #fbbf24;
+}
+.stat-label {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+.hero-buttons {
+    display: flex;
+    gap: 1rem;
+}
+.btn {
+    padding: 0.75rem 2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    display: inline-block;
+    border: 2px solid transparent;
+}
+.btn-primary {
+    background: white;
+    color: var(--primary-color);
+}
+.btn-primary:hover {
+    background: transparent;
+    color: white;
+    border-color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+.btn-secondary {
+    background: transparent;
+    color: white;
+    border-color: white;
+}
+.btn-secondary:hover {
+    background: white;
+    color: var(--primary-color);
+    transform: translateY(-2px);
+}
+/* Syllogism Example */
+.hero-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.syllogism-example {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    max-width: 400px;
+}
+.premise, .conclusion {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    border-left: 4px solid #fbbf24;
+}
+.premise-label, .conclusion-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: #fbbf24;
+}
+.premise-text, .conclusion-text {
+    color: white;
+    font-size: 0.9rem;
+}
+.validity-badge {
+    display: inline-block;
+    background: var(--success-color);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+}
+/* Section Styles */
+section {
+    padding: 5rem 0;
+}
+.section-title {
+    text-align: center;
+    margin-bottom: 3rem;
+    color: var(--text-primary);
+    position: relative;
+}
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 4px;
+    background: var(--primary-color);
+    border-radius: 2px;
+}
+/* Abstract Section */
+.abstract {
+    background: var(--background-alt);
+}
+.abstract-text {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 2rem;
+    text-align: center;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.key-contributions {
+    margin-top: 3rem;
+}
+.key-contributions h3 {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+.contributions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+}
+.contribution-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    text-align: center;
+    box-shadow: var(--shadow-md);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.contribution-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-xl);
+}
+.contribution-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+.contribution-item h4 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+/* Dataset Section */
+.dataset-description {
+    margin-bottom: 3rem;
+    text-align: center;
+}
+.example-section {
+    margin-bottom: 3rem;
+}
+.example-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: center;
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+}
+.example-image {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+.categories-section {
+    margin-top: 3rem;
+}
+.categories-visual {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    align-items: center;
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+}
+.categories-image {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+/* Results Section */
+.results {
+    background: var(--background-alt);
+}
+.results-overview {
+    margin-bottom: 4rem;
+}
+.performance-table {
+    overflow-x: auto;
+    background: white;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+}
+.performance-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.performance-table th,
+.performance-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+.performance-table th {
+    background: var(--primary-color);
+    color: white;
+    font-weight: 600;
+}
+.performance-table .top-performer {
+    background: rgba(37, 99, 235, 0.1);
+    font-weight: 600;
+}
+.prompt-analysis {
+    margin-top: 4rem;
+}
+.prompt-charts {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+.chart-container {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+}
+.chart-container h4 {
+    text-align: center;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+.chart-image {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+.prompt-insights {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+.insight-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+    border-left: 4px solid var(--primary-color);
+}
+.insight-item h4 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+/* Findings Section */
+.findings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+}
+.finding-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+    transition: transform 0.3s ease;
+}
+.finding-item:hover {
+    transform: translateY(-5px);
+}
+.finding-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+.finding-item h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+/* Resources Section */
+.resources {
+    background: var(--background-alt);
+}
+.resource-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+.resource-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+    text-align: center;
+}
+.resource-item h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+.resource-link {
+    display: inline-block;
+    background: var(--primary-color);
+    color: white;
+    padding: 0.75rem 2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 1rem;
+}
+.resource-link:hover {
+    background: var(--secondary-color);
+    transform: translateY(-2px);
+}
+.citation {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+    margin-bottom: 2rem;
+}
+.citation-box {
+    background: #f8fafc;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 1.5rem;
+    overflow-x: auto;
+}
+.citation-box code {
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+}
+.contact {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow-md);
+}
+/* Footer */
+.footer {
+    background: var(--text-primary);
+    color: white;
+    padding: 3rem 0 1rem;
+}
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+.footer-section h3,
+.footer-section h4 {
+    margin-bottom: 1rem;
+    color: white;
+}
+.footer-section ul {
+    list-style: none;
+}
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+.footer-section a {
+    color: #d1d5db;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+.footer-section a:hover {
+    color: white;
+}
+.footer-bottom {
+    border-top: 1px solid #374151;
+    padding-top: 1rem;
+    text-align: center;
+    color: #9ca3af;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hamburger {
+        display: flex;
+    }
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 70px;
+        flex-direction: column;
+        background-color: white;
+        width: 100%;
+        text-align: center;
+        transition: 0.3s;
+        box-shadow: var(--shadow-lg);
+        padding: 2rem 0;
+    }
+    .nav-menu.active {
+        left: 0;
+    }
+    .hero-container {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    .hero-stats {
+        justify-content: center;
+    }
+    .example-container,
+    .categories-visual {
+        grid-template-columns: 1fr;
+    }
+    .prompt-charts {
+        grid-template-columns: 1fr;
+    }
+    h1 { font-size: 2.5rem; }
+    h2 { font-size: 2rem; }
+    h3 { font-size: 1.5rem; }
+    .container {
+        padding: 0 1rem;
+    }
+    section {
+        padding: 3rem 0;
+    }
+}
+/* Image styling - ensure visibility */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    opacity: 1 !important;
+    transition: opacity 0.3s ease;
+}
+.example-image, .categories-image, .chart-image {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+/* Hero title animation */
+.hero-title {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 1s ease, transform 1s ease;
+}
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+/* Loading animation for stats */
+@keyframes countUp {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Loading animation for stats */
+@keyframes countUp {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}