Merge branch 'main' of github.com:UNIMIBInside/sti-website

unimib-datAI · Jul 15, 2024 · b969b78 · b969b78
2 parents ac7de89 + 39e8c33
commit b969b78
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 36 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,6 +6,6 @@ const isProd = import.meta.env.PROD;
 // https://astro.build/config
 export default defineConfig({
   site: "https://unimibinside.github.io/sti-website/",
-  base: isProd ? "/sti-website/" : "/",
+  base: isProd ? "/sti-website" : "/",
   integrations: [tailwind(), react()],
 });
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -36,11 +36,11 @@ import MenuItem from "@components/MenuItem.astro";
           class="flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0"
         >
           <MenuItem href="/" title="Home" />
-          <MenuItem href="/description" title="Description" />
-          <MenuItem href="/tutorial" title="Tutorial" />
-          <MenuItem href="/approaches" title="Approaches" />
-          <MenuItem href="/datasets" title="Dataset" />
-          <MenuItem href="/mammotab" title="MammoTab" />
+          <MenuItem href="/description/" title="Description" />
+          <MenuItem href="/tutorial/" title="Tutorial" />
+          <MenuItem href="/approaches/" title="Approaches" />
+          <MenuItem href="/datasets/" title="Datasets" />
+          <MenuItem href="/mammotab/" title="MammoTab" />
         </ul>
       </div>
     </div>

diff --git a/src/components/HorizontalTimeline.astro b/src/components/HorizontalTimeline.astro
@@ -0,0 +1,88 @@
+---
+import TimelineListItem from "./TimelineListItem.astro";
+---
+
+<ol class="items-start sm:flex mt-10">
+  <TimelineListItem
+    title="MantisTable (UI)"
+    info="06/2019"
+    published="Demo"
+    item="ESWC"
+    features="Interface"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"/><circle cx="12" cy="8" r="6"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="MantisTable"
+    info="10/2019"
+    published="Poster"
+    item="Onthology matching @ISWC"
+    approach="Approach v1"
+    features="Algorithm (CTA, CPA, CEA)"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="MantisTable "
+    info="10/2019"
+    published="Challenge"
+    item="1° SemTab"
+    features="Algorithm (CTA, CPA, CEA)"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"/><circle cx="12" cy="8" r="6"/></svg></TimelineListItem>
+  <TimelineListItem
+  title="StilTool"
+    info="06/2020"
+    published="Demo"
+    item="ESWC"
+    approach="Tool for evaluating STI approach"
+    features="Gold Standard analysis"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+</ol>
+<ol class="items-start sm:flex sm:mt-16">
+  <TimelineListItem
+    title="MantisTable"
+    info="11/2020"
+    published="Journal"
+    item="FGCS"
+    features="Complete Annotation Algorithm (Processing, CTA, CPA, CEA)"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="MantisTable SE"
+    info="06/2020"
+    published="Challenge"
+    item="2° SemTab"
+    approach="Approach v2"
+    features="Lookup"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="STILTool+"
+    info="11/2020"
+    published="Conference"
+    item="ISWC2020"
+    features="Gold Standard Analysis"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="MantisTable V"
+    info="10/2021"
+    published="Challenge"
+    item="3° SemTab"
+    approach="Approach V3"
+    features="Complete Annotation Algorithm"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+</ol>
+<ol class="items-start sm:flex sm:mt-16">
+  <TimelineListItem
+    title="s-elBat & MammoTab"
+    info="10/2022"
+    published="Challenge"
+    item="4° SemTab"
+    features="Features Vector Algorithm"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="LamAPI"
+    info="10/2022"
+    published="Workshop"
+    item="Ontology matching @ISWC"
+    features="Lookup"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+  <TimelineListItem
+    title="s-elBat (supervised/unsupervised modules), LamAPI & SemtUI"
+    item="TBD"
+  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/></svg></TimelineListItem>
+</ol>
diff --git a/src/components/MammotabTimeline.astro b/src/components/MammotabTimeline.astro
@@ -19,25 +19,25 @@ import TableV2 from "@/components/TableV2.astro";
     <div class="absolute top-0 left-0 w-[1px] h-full bg-purple-500"></div>
     <Release
       title="Mammotab 2024"
-      version="V2"
+      version="V2-alpha (SemTab)"
       link="https://doi.org/10.5281/zenodo.7014472"
       downloadable="false"
     >
       <div>
         <p class="text-base md:text-base lg:text-base">
-          The annotations within MammoTab 24 are derived from Wikidata v.
+          This version was created for SemTab 2024, it comes from the preliminary version of V2. The annotations within MammoTab 24 are derived from Wikidata v.
           20240401 and follow the structure used in the <a
-            href="https://www.cs.ox.ac.uk/isg/challenges/sem-tab/"
-            target="_blank">SemTab challenge</a
+            href="https://sem-tab-challenge.github.io/2024/tracks/sti-vs-llm-track.html "
+            target="_blank">SemTab challenge.</a
           >.
         </p>
         <p class="text-base md:text-base lg:text-base mt-0">
           All tables are stored in a separate CSV file, where each line in the
-          file corresponds to a row in the table
+          file corresponds to a row in the table.
         </p>
         <p class="text-base md:text-base lg:text-base mt-0">
           Target columns for annotation, CTA, and CEA are saved in separate CSV
-          files
+          files.
         </p>
       </div>
 
@@ -124,16 +124,7 @@ import TableV2 from "@/components/TableV2.astro";
     >
       <div>
         <p class="text-base md:text-base lg:text-base">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p class="text-base md:text-base lg:text-base mt-0">
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-          nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p class="text-base md:text-base lg:text-base mt-0">
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur.
+          The annotations within MammoTab22 are derived from Wikidata v. 20220511 and follow the structure used in the SemTab challenge. All tables are stored in a separate CSV file, where each line in the file corresponds to a row in the table. Target columns for annotation, CTA, and CEA are saved in separate CSV files
         </p>
       </div>
 

diff --git a/src/components/MenuItem.astro b/src/components/MenuItem.astro
@@ -11,10 +11,9 @@ type Props = {
 };
 
 const { title, href } = Astro.props;
-const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+const base = import.meta.env.BASE_URL;
 
 let slug = Astro.url.pathname;
-slug = slug == "/" ? slug : slug.replace(/\/$/, "");
 
 const destination = base + href;
 ---

diff --git a/src/components/TimelineListItem.astro b/src/components/TimelineListItem.astro
@@ -0,0 +1,44 @@
+---
+type Props = {
+  icon?: string;
+  title?: string;
+  info?: string;
+  published?: string;
+  item?: string;
+  approach?: string;
+  features?: string;
+};
+
+const { icon, title, info, published, approach, item, features } = Astro.props;
+---
+
+<li class="relative mb-6 sm:mb-0 sm:w-1/4">
+  <div class="flex items-center">
+    <div
+      class="z-10 flex items-center justify-center w-6 h-6 bg-purple-600 rounded-full ring-0 ring-purple-500 sm:ring-8 shrink-0"
+    >
+  <slot/>
+    </div>
+    <div class="hidden sm:flex w-full bg-purple-500 h-0.5"></div>
+  </div>
+  <div class="mt-4 sm:pe-8 max-w-full">
+    <a href="#"
+      ><h3 class="text-lg font-semibold text-foreground">
+        {title}
+      </h3>
+    </a>
+    <p class="block mb-2 text-sm font-normal leading-none text-gray-500">
+      {info}
+    </p>
+    <p class="text-base font-semibold text-purple-500">
+      {published}
+    </p>
+    <ul class="marker:text-purple-500 list-outside list-disc ml-6">
+      <li class="text-base font-normal text-foreground">
+        {item}
+      </li>
+    </ul>
+    <p class="text-base font-normal text-foreground mt-2">{approach}</p>
+    <p class="text-base font-semibold text-foreground mt-2">{features}</p>
+  </div>
+</li>
diff --git a/src/pages/datasets.astro b/src/pages/datasets.astro
@@ -8,7 +8,7 @@ import statistics from "@/assets/statistics.json";
 const { approaches } = statistics;
 ---
 
-<Layout title="Dataset">
+<Layout title="Datasets">
   <main class="px-4">
     <Section>
       <div class="flex items-center">

diff --git a/src/pages/description.astro b/src/pages/description.astro
@@ -101,7 +101,7 @@ import TableDescription from "@components/TableDescription.astro";
           <li>Pairs of columns are annotated with a binary KG property</li>
         </ul>
         <p class="mb-6 md:text-base lg:text-base">
-          This annotation process can be visualized <strong
+         The result of the annotation can be visualised <strong
             >in the figure below</strong
           >
         </p>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,6 +5,7 @@ import Section from "@components/Section.astro";
 import Button from "@components/Button.astro";
 import mammoth from "@/assets/geometric-mammoth.png";
 import logoISWC from "@/assets/logoISWC.png";
+import HorizontalTimeline from "@components/HorizontalTimeline.astro";
 ---
 
 <Layout title="STI resources">
@@ -21,18 +22,15 @@ import logoISWC from "@/assets/logoISWC.png";
         What's Semantic Table Interpretation?
       </h2>
       <p class="mt-4 mb-6 md:text-base lg:text-base">
-        Semantic Table Interpretation, as defined by the widely accepted
-        formalisation from the SemTab challenge, involves annotating relational
+        Semantic Table Interpretation, as defined by the the <a href="https://sem-tab-challenge.github.io/2023/">SemTab challenge</a>, involves annotating relational
         tables with information from a Knowledge Graph (KG). This process
         includes associating each column in a table with one or more KG types,
         known as Column Type Annotation (CTA). Additionally, Cell Entity
-        Annotation (CEA) is applied to annotate each cell in "entity columns"
-        with a KG entity or mark it as NIL if it does not exist in the KG.
-        Column Property Annotation (CPA) involves annotating pairs of columns
-        with a binary KG property. The result of this annotation process is a
-        table enriched with semantic information, which can introduce new
-        elements to the KG
-      </p>
+        Annotation (CEA) is applied to annotate each cell in named entity columns
+        with a KG entity or mark it as Not In Lexicon (NIL) if it does not exist in the KG.
+        Columns Property Annotation (CPA) involves annotating pairs of columns
+        with a KG property. The result of this annotation process is a
+        table enriched with semantic information
       <p class="mt-4 mb-4 md:text-base lg:text-base"></p>
       <Button href="/sti-website/description" variant="secondary">
         Learn more about STI
@@ -68,6 +66,15 @@ import logoISWC from "@/assets/logoISWC.png";
       </section>
     </Section>
 
+    <Section className="pt-20">
+      <h2
+        class="text-3xl font-semibold bg-gradient-to-r from-[#9E0974] to-[#6665E9] inline-block text-transparent bg-clip-text mt-10"
+      >
+        Our Approaches
+      </h2>
+      <HorizontalTimeline />
+    </Section>
+
     <Section title="" className="pt-20">
       <h2
         class="text-3xl font-semibold bg-gradient-to-r from-[#9E0974] to-[#6665E9] inline-block text-transparent bg-clip-text mt-10"

diff --git a/src/pages/tutorial.astro b/src/pages/tutorial.astro
@@ -102,7 +102,7 @@ import fabio from "src/assets/fabio.jpg";
       <Presenter
         image={marco.src}
         name="Marco Cremaschi"
-        profession="Research Assistant at the University of Milan-Bicocca"
+        profession="Assistant Professor at the University of Milan-Bicocca"
         description="He specialises in the application of ML techniques in the Semantic Web. He is chair of SemTab 2024, and organiser of the “STI vs LLMs Track”"
       />
       <Presenter

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -40,6 +40,7 @@ export default {
         orange: "#E99E57",
         purple: {
           500: "#6665E9",
+          600: "#353496",
         },
         cardBackground: "#0C0C2F",
         sectionBackground: "#0C0C2F",