<!DOCTYPE html> <!-- saved from url=(0095)file:///...
Creato il: 20 aprile 2026
Risposto usando GPT-5.4 Thinking da Chat01
Domanda
<!DOCTYPE html>
<!-- saved from url=(0095)file:///D:/importantuploaddocumentsonlms-20260208T115709Z-1-001/Final%20Review/MARS_Poster.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MARS – MAQ Autonomous Recruitment System | Poster</title>
<link href="./MARS – MAQ Autonomous Recruitment System _ Poster_files/css2" rel="stylesheet">
<style>
:root {
--gold: #F5C518;
--blue: #0A84FF;
--teal: #00C6B8;
--dark: #080C14;
--panel: #0E1420;
--card: #121A28;
--border: #1E2D45;
--text: #D8E6F5;
--muted: #7A9BBF;
--accent: #FF6B35;
--white: #FFFFFF;
}
- { margin: 0; padding: 0; box-sizing: border-box; }
/* A1 = 594mm x 841mm (portrait). */
html, body {
margin: 0;
width: 100%;
min-height: 100%;
}
/* Screen preview size; print rules below lock exact A1 dimensions. */
body {
background: #04070F;
display: flex;
justify-content: center;
padding: 0;
font-family: 'Barlow', sans-serif;
}
.poster {
width: 1700px;
min-height: 2400px;
margin: 0;
background: var(--dark);
position: relative;
overflow: hidden;
}
/* ── Background grid texture ── */
.poster::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(10,132,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,132,255,0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
/* ── Glow blobs ── */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.blob-1 { width:600px; height:600px; background:rgba(10,132,255,0.12); top:-100px; right:-100px; }
.blob-2 { width:500px; height:500px; background:rgba(0,198,184,0.08); bottom:200px; left:-100px; }
.blob-3 { width:400px; height:400px; background:rgba(245,197,24,0.07); top:900px; right:200px; }
/* ── HEADER ── */
.header {
position: relative; z-index: 1;
background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #0A1628 100%);
border-bottom: 3px solid var(--gold);
padding: 28px 48px;
display: flex;
align-items: center;
gap: 40px;
}
.header-logo-block {
display: flex;
flex-direction: column;
align-items: center;
min-width: 160px;
}
.uni-logo-box {
background: white;
border-radius: 8px;
padding: 8px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
border: 2px solid var(--gold);
}
.uni-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
color: #1A3A6C;
line-height: 1;
letter-spacing: 2px;
}
.uni-sub {
font-size: 9px;
font-weight: 700;
color: #C8281E;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
}
.uni-grade {
font-size: 8px;
font-weight: 700;
background: #C8281E;
color: white;
padding: 1px 6px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1px;
}
.header-center {
flex: 1;
text-align: center;
}
.poster-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 86px;
letter-spacing: 8px;
color: var(--white);
line-height: 1;
text-shadow: 0 0 40px rgba(10,132,255,0.5);
}
.poster-title span { color: var(--gold); }
.poster-subtitle {
font-family: 'Barlow Condensed', sans-serif;
font-size: 22px;
color: var(--teal);
letter-spacing: 4px;
text-transform: uppercase;
margin-top: 4px;
}
.poster-meta {
margin-top: 10px;
font-size: 17px;
color: var(--text);
font-weight: 300;
}
.poster-meta strong { color: var(--gold); font-weight: 600; }
.header-company {
min-width: 160px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.company-badge {
background: white;
border-radius: 10px;
padding: 12px 20px;
border: 2px solid var(--gold);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.company-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 28px;
color: #0A1628;
letter-spacing: 3px;
}
.company-sub {
font-size: 9px;
color: #444;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
}
/* ── MAIN BODY ── */
.body {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 420px 1fr 420px;
gap: 0;
padding: 0;
}
/* ── Column ── */
.col {
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 24px;
border-right: 1px solid var(--border);
}
.col:last-child { border-right: none; }
/* ── Section card ── */
.section {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.section-header {
padding: 10px 18px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
}
.section-header.gold { background: linear-gradient(90deg, rgba(245,197,24,0.15), transparent); border-left: 3px solid var(--gold); }
.section-header.blue { background: linear-gradient(90deg, rgba(10,132,255,0.15), transparent); border-left: 3px solid var(--blue); }
.section-header.teal { background: linear-gradient(90deg, rgba(0,198,184,0.15), transparent); border-left: 3px solid var(--teal); }
.section-header.orange { background: linear-gradient(90deg, rgba(255,107,53,0.15), transparent); border-left: 3px solid var(--accent); }
.section-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--white);
}
.section-icon {
font-size: 18px;
}
.section-body {
padding: 16px 18px;
}
p {
font-size: 14px;
line-height: 1.65;
color: var(--text);
font-weight: 300;
}
/* ── Architecture diagram ── */
.arch-diagram {
background: var(--card);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.arch-node {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 10px 20px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
width: 100%;
max-width: 320px;
}
.arch-node.user { background: rgba(245,197,24,0.15); border: 1.5px solid var(--gold); color: var(--gold); }
.arch-node.teams { background: rgba(10,132,255,0.15); border: 1.5px solid var(--blue); color: var(--blue); }
.arch-node.bot { background: rgba(0,198,184,0.15); border: 1.5px solid var(--teal); color: var(--teal); }
.arch-node.ai { background: rgba(255,107,53,0.15); border: 1.5px solid var(--accent); color: var(--accent); }
.arch-node.faiss { background: rgba(150,100,255,0.15); border: 1.5px solid #967CFF; color: #967CFF; }
.arch-node.output { background: rgba(245,197,24,0.15); border: 1.5px solid var(--gold); color: var(--gold); }
.arch-arrow {
font-size: 20px;
color: var(--muted);
line-height: 1;
}
.arch-split {
display: flex;
gap: 10px;
width: 100%;
max-width: 320px;
}
.arch-split .arch-node {
flex: 1;
font-size: 11px;
padding: 8px 6px;
}
/* ── Feature pills ── */
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.feature-pill {
background: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.pill-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.pill-text {
font-size: 12px;
line-height: 1.5;
color: var(--text);
font-weight: 400;
}
.pill-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--teal);
display: block;
margin-bottom: 2px;
}
/* ── Tech stack tags ── */
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid;
font-weight: 700;
letter-spacing: 0.5px;
}
.tag.blue { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.5); color: #5BAEFF; }
.tag.teal { background: rgba(0,198,184,0.12); border-color: rgba(0,198,184,0.5); color: #4DDFD6; }
.tag.gold { background: rgba(245,197,24,0.12); border-color: rgba(245,197,24,0.5); color: var(--gold); }
.tag.orange{ background: rgba(255,107,53,0.12); border-color: rgba(255,107,53,0.5); color: #FF9070; }
.tag.purple{ background: rgba(150,100,255,0.12);border-color: rgba(150,100,255,0.5);color: #C0A8FF; }
/* ── Performance table ── */
.perf-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.perf-table th {
background: var(--card);
color: var(--gold);
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.perf-table td {
padding: 7px 10px;
color: var(--text);
border-bottom: 1px solid rgba(30,45,69,0.5);
vertical-align: middle;
}
.perf-table tr:last-child td { border-bottom: none; }
.perf-val {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
color: var(--teal);
}
/* ── Results comparison ── */
.compare-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.compare-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 6px;
}
.compare-before {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 6px 10px;
font-size: 11px;
color: var(--muted);
text-align: right;
font-weight: 600;
}
.compare-label {
background: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 8px;
font-size: 11px;
color: var(--text);
text-align: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.compare-after {
background: rgba(0,198,184,0.1);
border: 1px solid rgba(0,198,184,0.3);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
color: var(--teal);
text-align: left;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
.compare-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 6px;
margin-bottom: 4px;
}
.compare-header span {
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
text-align: center;
}
.compare-header .ch-before { background: rgba(255,255,255,0.06); color: var(--muted); }
.compare-header .ch-vs { background: var(--gold); color: var(--dark); }
.compare-header .ch-after { background: rgba(0,198,184,0.2); color: var(--teal); }
/* ── Question tier display ── */
.tier-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.tier {
background: var(--card);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.tier-header {
padding: 7px 14px;
display: flex;
align-items: center;
gap: 8px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.tier-header.intro { background: rgba(10,132,255,0.2); color: #5BAEFF; }
.tier-header.inter { background: rgba(245,197,24,0.2); color: var(--gold); }
.tier-header.adv { background: rgba(255,107,53,0.2); color: var(--accent); }
.tier-body {
padding: 10px 14px;
font-size: 12px;
color: var(--text);
line-height: 1.55;
}
.tier-body em {
color: var(--muted);
font-style: normal;
font-size: 11px;
font-family: 'JetBrains Mono', monospace;
}
.tier-q {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 5px;
}
.tier-q:last-child { margin-bottom: 0; }
.tier-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted);
margin-top: 2px;
flex-shrink: 0;
}
/* ── Flow diagram ── */
.flow {
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
}
.flow-step {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 16px;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}
.flow-step-num {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
flex-shrink: 0;
}
.flow-step-num.s1 { background: rgba(10,132,255,0.3); color: var(--blue); border: 1.5px solid var(--blue); }
.flow-step-num.s2 { background: rgba(245,197,24,0.3); color: var(--gold); border: 1.5px solid var(--gold); }
.flow-step-num.s3 { background: rgba(0,198,184,0.3); color: var(--teal); border: 1.5px solid var(--teal); }
.flow-step-content { flex: 1; }
.flow-step-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--white);
text-transform: uppercase;
letter-spacing: 1px;
}
.flow-step-desc {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px;
line-height: 1.4;
}
.flow-arrow {
text-align: center;
font-size: 18px;
color: var(--muted);
line-height: 1;
}
/* ── Stat boxes ── */
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stat-box {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 12px;
text-align: center;
}
.stat-val {
font-family: 'Bebas Neue', sans-serif;
font-size: 36px;
line-height: 1;
color: var(--teal);
}
.stat-val.gold { color: var(--gold); }
.stat-val.blue { color: var(--blue); }
.stat-val.orange { color: var(--accent); }
.stat-unit {
font-size: 14px;
color: var(--muted);
font-weight: 600;
}
.stat-label {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* ── Inline highlight ── */
.hl { color: var(--gold); font-weight: 600; }
.hl-teal { color: var(--teal); font-weight: 600; }
.hl-blue { color: #5BAEFF; font-weight: 600; }
/* ── Bullet list ── */
ul.mars-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
padding: 0;
}
ul.mars-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--text);
line-height: 1.5;
}
ul.mars-list li::before {
content: '▸';
color: var(--teal);
flex-shrink: 0;
font-size: 12px;
margin-top: 2px;
}
/* ── Divider ── */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 4px 0;
}
/* ── Center column special ── */
.col-center {
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* ── Middle section full-width arch ── */
.arch-full {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.arch-flow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding: 16px;
}
.anode {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 14px;
border-radius: 8px;
border: 1.5px solid;
min-width: 130px;
text-align: center;
}
.anode-icon { font-size: 22px; }
.anode-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.anode-sub {
font-size: 10px;
opacity: 0.75;
line-height: 1.3;
}
.anode.n1 { background: rgba(245,197,24,0.1); border-color: var(--gold); color: var(--gold); }
.anode.n2 { background: rgba(10,132,255,0.1); border-color: var(--blue); color: var(--blue); }
.anode.n3 { background: rgba(150,100,255,0.1); border-color: #967CFF; color: #C0A8FF; }
.anode.n4 { background: rgba(0,198,184,0.1); border-color: var(--teal); color: var(--teal); }
.anode.n5 { background: rgba(255,107,53,0.1); border-color: var(--accent); color: var(--accent); }
.flow-connector {
font-size: 22px;
color: var(--muted);
font-weight: 900;
}
.arch-split-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 16px 16px;
}
.arch-sub-nodes {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.anode-sm {
padding: 9px 12px;
border-radius: 7px;
border: 1.5px solid;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.anode-sm.sm-gold { background: rgba(245,197,24,0.08); border-color: rgba(245,197,24,0.4); color: var(--gold); }
.anode-sm.sm-blue { background: rgba(10,132,255,0.08); border-color: rgba(10,132,255,0.4); color: #5BAEFF; }
.anode-sm.sm-teal { background: rgba(0,198,184,0.08); border-color: rgba(0,198,184,0.4); color: var(--teal); }
.anode-sm.sm-purple { background: rgba(150,100,255,0.08); border-color: rgba(150,100,255,0.4); color: #C0A8FF; }
.split-arrow {
font-size: 26px;
color: var(--muted);
}
/* ── FOOTER ── */
.footer {
position: relative; z-index: 1;
background: linear-gradient(135deg, #0A1628 0%, #0D1E38 100%);
border-top: 2px solid var(--gold);
padding: 16px 48px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left {
font-size: 13px;
color: var(--muted);
}
.footer-left strong { color: var(--text); }
.footer-center {
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
color: var(--muted);
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
.footer-right {
font-size: 12px;
color: var(--muted);
text-align: right;
}
/* ── Print styles ── */
@page {
size: 594mm 841mm;
margin: 0;
}
@media print {
html, body {
width: 594mm;
height: 841mm;
margin: 0;
padding: 0;
overflow: hidden;
background: none;
}
text.poster { width: 594mm; height: 841mm; min-height: 841mm; margin: 0; box-sizing: border-box; }
}
</style>
</div> <!-- ══════════ BODY ══════════ --> <div class="body">text<!-- Title --> <div class="header-center"> <div class="poster-title"><span>MARS</span> — MAQ Autonomous Recruitment System</div> <div class="poster-subtitle">AI-Powered Interview Assistant · Microsoft Teams Integration</div> <div class="poster-meta"> <strong>[Your Name]</strong> · Roll No: [XXXX] | Guided by: <strong>[Supervisor Name]</strong>, MAQ Software | Department of Computer Science & Engineering · 2025–26 </div> </div> <!-- Company --> <div class="header-company"> <div class="company-badge"> <div class="company-name">MAQ</div> <div class="company-sub">Software</div> <div class="company-sub" style="color:#0A84FF;font-size:8px">Microsoft Gold Partner</div> </div> </div>
</div> <!-- ══════════ FOOTER ══════════ --> <div class="footer"> <div class="footer-left"> <strong>[Your Name]</strong> · [Roll No] · Dept. of Computer Science & Engineering<br> Nirma University, Ahmedabad · Academic Year 2025–26 </div> <div class="footer-center"> MARS — MAQ Autonomous Recruitment System<br> <span style="color:var(--gold);font-size:11px">Internship Project · MAQ Software</span> </div> <div class="footer-right"> Guided by: [Supervisor Name]<br> MAQ Software · Microsoft Gold Partner </div> </div> </div> </body></html>text<!-- ═══ LEFT COLUMN ═══ --> <div class="col"> <!-- About Company --> <div class="section"> <div class="section-header gold"> <span class="section-icon">🏢</span> <span class="section-title">About the Company</span> </div> <div class="section-body"> <p><span class="hl">MAQ Software</span> is a Microsoft-certified Gold Partner and analytics engineering firm headquartered in Redmond, Washington. It specialises in Business Intelligence, data engineering, and custom enterprise solutions for Fortune 500 clients.</p> <div class="divider" style="margin:10px 0"></div> <p>The company is a leading contributor to the Power BI ecosystem with <span class="hl-teal">30+ open-source custom visuals</span>, widely used across enterprise deployments worldwide. Teams communicate and collaborate through Microsoft Teams and Azure DevOps.</p> </div> </div> <!-- Abstract --> <div class="section"> <div class="section-header blue"> <span class="section-icon">📄</span> <span class="section-title">Abstract</span> </div> <div class="section-body"> <p>The traditional recruitment pipeline involves significant manual effort: screening resumes, formulating interview questions, and dynamically adapting during live interviews. This project presents <span class="hl">MARS</span> — an intelligent, end-to-end recruitment assistant integrated natively into <span class="hl-teal">Microsoft Teams</span>.</p> <div class="divider" style="margin:10px 0"></div> <p>MARS leverages <span class="hl-blue">Azure OpenAI (GPT-4o)</span>, <span class="hl-blue">FAISS vector indexing</span>, and <span class="hl-blue">Azure Speech Services</span> to automate three recruitment phases: resume indexing, tiered question generation, and real-time live interview assistance — all within the interviewer's existing workflow.</p> </div> </div> <!-- Method --> <div class="section"> <div class="section-header teal"> <span class="section-icon">⚙️</span> <span class="section-title">Methodology</span> </div> <div class="section-body"> <div class="flow"> <div class="flow-step"> <div class="flow-step-num s1">1</div> <div class="flow-step-content"> <div class="flow-step-title">Resume Ingestion & Indexing</div> <div class="flow-step-desc">Resumes (PDF/DOCX/TXT) from Azure Blob Storage are parsed, embedded via <em>text-embedding-ada-002</em>, and stored in a FAISS index for sub-millisecond semantic search.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s2">2</div> <div class="flow-step-content"> <div class="flow-step-title">Tiered Question Generation</div> <div class="flow-step-desc">On Teams command, GPT-4o generates 21 candidate-specific questions (7 per tier) in parallel with MCP web scraper fetching 50–100 market questions.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s3">3</div> <div class="flow-step-content"> <div class="flow-step-title">Live Interview Assistance</div> <div class="flow-step-desc">Bot joins Teams call, streams audio via Graph API, transcribes with Azure Speech (100–200ms), and privately delivers follow-up suggestions to the interviewer in real time.</div> </div> </div> </div> </div> </div> <!-- Tech Stack --> <div class="section"> <div class="section-header orange"> <span class="section-icon">🛠️</span> <span class="section-title">Technology Stack</span> </div> <div class="section-body"> <div class="tech-tags"> <span class="tag blue">Python 3.11</span> <span class="tag blue">Azure OpenAI</span> <span class="tag blue">GPT-4o</span> <span class="tag teal">FAISS</span> <span class="tag teal">Azure Speech</span> <span class="tag teal">Whisper</span> <span class="tag gold">Microsoft Graph API</span> <span class="tag gold">Bot Framework SDK</span> <span class="tag orange">aiohttp</span> <span class="tag orange">WebSockets</span> <span class="tag purple">Azure Blob Storage</span> <span class="tag purple">PyPDF2 · python-docx</span> <span class="tag purple">SeleniumBase</span> <span class="tag blue">text-embedding-ada-002</span> </div> </div> </div> </div> <!-- ═══ END LEFT ═══ --> <!-- ═══ CENTER COLUMN ═══ --> <div class="col col-center"> <!-- System Architecture --> <div class="arch-full"> <div class="section-header blue" style="border-radius:0"> <span class="section-icon">🏗️</span> <span class="section-title">System Architecture</span> </div> <div class="arch-flow-row"> <div class="anode n1"> <span class="anode-icon">👤</span> <span class="anode-label">Interviewer</span> <span class="anode-sub">Teams Chat Command</span> </div> <div class="flow-connector">→</div> <div class="anode n2"> <span class="anode-icon">💬</span> <span class="anode-label">Teams Bot</span> <span class="anode-sub">bot_server.py · Port 3978</span> </div> <div class="flow-connector">→</div> <div class="anode n3"> <span class="anode-icon">🗄️</span> <span class="anode-label">FAISS Index</span> <span class="anode-sub">resume_indexer.py</span> </div> <div class="flow-connector">→</div> <div class="anode n5"> <span class="anode-icon">🤖</span> <span class="anode-label">GPT-4o</span> <span class="anode-sub">Azure OpenAI</span> </div> </div> <div class="arch-split-row"> <div class="arch-sub-nodes"> <div class="anode-sm sm-blue">📞 MS Graph Calling API · Join Teams Call</div> <div class="anode-sm sm-teal">🎙️ Audio Stream → WebSocket → 16kHz PCM</div> </div> <div class="split-arrow">→</div> <div class="arch-sub-nodes"> <div class="anode-sm sm-gold">⚡ Azure Speech Services · 100–200ms latency</div> <div class="anode-sm sm-purple">💬 Private Teams Chat → Live Suggestions</div> </div> </div> </div> <!-- Question Tiers --> <div class="section"> <div class="section-header gold"> <span class="section-icon">❓</span> <span class="section-title">Tiered Question Generation</span> </div> <div class="section-body"> <div class="tier-block"> <div class="tier"> <div class="tier-header intro">🌱 Introductory <em style="font-family:JetBrains Mono,monospace;font-size:11px;opacity:0.7">7 questions · Foundational knowledge</em></div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> What is the difference between <span class="hl-blue">var</span>, <span class="hl-blue">let</span>, and <span class="hl-blue">const</span> in JavaScript?</div> <div class="tier-q"><span class="tier-num">Q2</span> Explain Python's <span class="hl-blue">Global Interpreter Lock (GIL)</span> and its practical implications.</div> <div class="tier-q"><span class="tier-num">Q3</span> What are React hooks and why were they introduced?</div> </div> </div> <div class="tier"> <div class="tier-header inter">🔧 Intermediate <em style="font-family:JetBrains Mono,monospace;font-size:11px;opacity:0.7">7 questions · Practical application</em></div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> How did you implement <span class="hl">microservices architecture</span> in your project and what challenges did you face?</div> <div class="tier-q"><span class="tier-num">Q2</span> Describe a difficult bug you resolved in <span class="hl">React state management</span>.</div> <div class="tier-q"><span class="tier-num">Q3</span> Walk me through the CI/CD pipeline you set up.</div> </div> </div> <div class="tier"> <div class="tier-header adv">🚀 Advanced <em style="font-family:JetBrains Mono,monospace;font-size:11px;opacity:0.7">7 questions · System design & architecture</em></div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Design a <span class="hl" style="color:var(--accent)">globally distributed system</span> for real-time data synchronisation across regions.</div> <div class="tier-q"><span class="tier-num">Q2</span> What are the architectural trade-offs between <span class="hl" style="color:var(--accent)">monolithic vs microservices</span>?</div> <div class="tier-q"><span class="tier-num">Q3</span> How would you optimise a database with <span class="hl" style="color:var(--accent)">100M+ records</span>?</div> </div> </div> </div> </div> </div> <!-- Features --> <div class="section"> <div class="section-header teal"> <span class="section-icon">✨</span> <span class="section-title">Key Features</span> </div> <div class="section-body"> <div class="feature-grid"> <div class="feature-pill"> <span class="pill-icon">🔍</span> <div class="pill-text"> <span class="pill-label">Semantic Search</span> FAISS vector similarity search across all indexed resumes with sub-millisecond lookup. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎯</span> <div class="pill-text"> <span class="pill-label">3-Tier Questions</span> Introductory → Intermediate → Advanced difficulty with 7 questions per tier. </div> </div> <div class="feature-pill"> <span class="pill-icon">🌐</span> <div class="pill-text"> <span class="pill-label">Market Questions</span> Web-scraped from GeeksforGeeks, InterviewBit delivering 50–100 additional questions. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎙️</span> <div class="pill-text"> <span class="pill-label">Live Transcription</span> Azure Speech Services with 100–200ms latency or Whisper for 97–99% accuracy. </div> </div> <div class="feature-pill"> <span class="pill-icon">💬</span> <div class="pill-text"> <span class="pill-label">Private Suggestions</span> Real-time follow-up questions delivered privately to interviewer mid-call. </div> </div> <div class="feature-pill"> <span class="pill-icon">⚡</span> <div class="pill-text"> <span class="pill-label">Parallel Processing</span> AI questions and web scraping run concurrently via asyncio for speed. </div> </div> </div> </div> </div> </div> <!-- ═══ END CENTER ═══ --> <!-- ═══ RIGHT COLUMN ═══ --> <div class="col"> <!-- Results / Comparison --> <div class="section"> <div class="section-header teal"> <span class="section-icon">📊</span> <span class="section-title">Results — Time Savings</span> </div> <div class="section-body"> <div class="compare-header"> <span class="ch-before">Manual</span> <span class="ch-vs">VS</span> <span class="ch-after">MARS</span> </div> <div class="compare-grid"> <div class="compare-row"> <div class="compare-before">30–45 min</div> <div class="compare-label">Question Prep</div> <div class="compare-after">~60 s</div> </div> <div class="compare-row"> <div class="compare-before">Manual</div> <div class="compare-label">Resume Search</div> <div class="compare-after">< 1 ms</div> </div> <div class="compare-row"> <div class="compare-before">15–25 Q's</div> <div class="compare-label">Total Questions</div> <div class="compare-after">65–120 Q's</div> </div> <div class="compare-row"> <div class="compare-before">None</div> <div class="compare-label">Live Suggestions</div> <div class="compare-after">200–400 ms</div> </div> <div class="compare-row"> <div class="compare-before">Manual notes</div> <div class="compare-label">Transcription</div> <div class="compare-after">Auto · 93%+</div> </div> <div class="compare-row"> <div class="compare-before">Inconsistent</div> <div class="compare-label">Coverage</div> <div class="compare-after">3-tier full</div> </div> </div> </div> </div> <!-- Performance stats --> <div class="section"> <div class="section-header gold"> <span class="section-icon">⚡</span> <span class="section-title">Performance Metrics</span> </div> <div class="section-body"> <div class="stat-grid"> <div class="stat-box"> <div class="stat-val gold">~60<span class="stat-unit">s</span></div> <div class="stat-label">First Query End-to-End</div> </div> <div class="stat-box"> <div class="stat-val"><1<span class="stat-unit">ms</span></div> <div class="stat-label">FAISS Candidate Lookup</div> </div> <div class="stat-box"> <div class="stat-val blue">200<span class="stat-unit">ms</span></div> <div class="stat-label">Speech Transcription</div> </div> <div class="stat-box"> <div class="stat-val orange">120<span class="stat-unit"></span></div> <div class="stat-label">Max Questions / Candidate</div> </div> </div> <div style="margin-top:10px"> <table class="perf-table"> <tbody><tr><th>Operation</th><th>Time</th></tr> <tr><td>Index 1 resume</td><td><span class="perf-val">~10s</span></td></tr> <tr><td>Semantic search</td><td><span class="perf-val">~500ms</span></td></tr> <tr><td>AI question gen (3 tiers)</td><td><span class="perf-val">~20–30s</span></td></tr> <tr><td>Market web scraping</td><td><span class="perf-val">~30–60s</span></td></tr> <tr><td>Live suggestion delivery</td><td><span class="perf-val">200–400ms</span></td></tr> </tbody></table> </div> </div> </div> <!-- Discussion --> <div class="section"> <div class="section-header blue"> <span class="section-icon">💡</span> <span class="section-title">Discussion</span> </div> <div class="section-body"> <p>MARS demonstrated that a fully AI-powered interview assistant can be built natively within the Microsoft ecosystem without disrupting the interviewer's existing workflow. The <span class="hl">3-tier question structure</span> mirrors the natural progression of technical interviews and received strong positive feedback from recruitment team members during user acceptance testing.</p> <div class="divider" style="margin:10px 0"></div> <p>Key challenges addressed: the <span class="hl-teal">Graph Calling API</span> requires a public HTTPS endpoint (resolved via Azure App Service deployment); Whisper's 1–3s latency was unsuitable for real-time assistance, making Azure Speech the preferred engine; and FAISS name-matching required fuzzy-string fallback for query tolerance.</p> <div class="divider" style="margin:10px 0"></div> <p>UAT with 2 interviewers confirmed <span class="hl">4.5/5 satisfaction</span> for question quality and real-time suggestions, with Teams integration scoring 5/5 for seamlessness.</p> </div> </div> <!-- Conclusion --> <div class="section"> <div class="section-header orange"> <span class="section-icon">🎯</span> <span class="section-title">Conclusion & Future Work</span> </div> <div class="section-body"> <ul class="mars-list"> <li>MARS successfully automates resume indexing, tiered question generation, and real-time interview assistance entirely within Microsoft Teams.</li> <li>The project provided hands-on experience with Azure cognitive services, the Microsoft Graph Calling API, and production-grade async Python development.</li> <li><strong style="color:var(--gold)">Future:</strong> Response caching for <1s repeat queries; ATS integration (Greenhouse/Workday); automated candidate scoring with bias testing; multi-language support (100+ via Azure Speech).</li> <li><strong style="color:var(--gold)">Future:</strong> Post-interview summary reports auto-generated and delivered to the interviewer; parallel web scraping to cut market question retrieval to ~20s.</li> </ul> </div> </div> </div> <!-- ═══ END RIGHT ═══ -->
update the code to fit in a1 size poster perfectly. no space left
Pensiero
Risposta
Replace these CSS blocks in your file.
1) Add size variables at the top of :root
css:root { --gold: #F5C518; --blue: #0A84FF; --teal: #00C6B8; --dark: #080C14; --panel: #0E1420; --card: #121A28; --border: #1E2D45; --text: #D8E6F5; --muted: #7A9BBF; --accent: #FF6B35; --white: #FFFFFF; /* A1 portrait */ --poster-w: 594mm; --poster-h: 841mm; --poster-ratio: 594 / 841; }
2) Replace the html, body and body blocks
css* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #04070F; display: grid; place-items: center; overflow: hidden; font-family: 'Barlow', sans-serif; }
3) Replace the .poster block
css.poster { width: min(100vw, calc(100vh * var(--poster-ratio))); height: min(100vh, calc(100vw / var(--poster-ratio))); aspect-ratio: 594 / 841; background: var(--dark); position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
4) Replace the .header block
css.header { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #0A1628 100%); border-bottom: 3px solid var(--gold); padding: 1.2% 2.2%; display: flex; align-items: center; gap: 1.8%; }
5) Replace the title/meta sizing so everything scales better
css.poster-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 4.4vw, 86px); letter-spacing: 0.22em; color: var(--white); line-height: 0.95; text-shadow: 0 0 40px rgba(10,132,255,0.5); } .poster-title span { color: var(--gold); } .poster-subtitle { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1.15vw, 22px); color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.25em; } .poster-meta { margin-top: 0.55em; font-size: clamp(10px, 0.9vw, 17px); color: var(--text); font-weight: 300; }
6) Replace the .body, .col, and .col-center blocks
css.body { position: relative; z-index: 1; display: grid; grid-template-columns: 24.5% 51% 24.5%; gap: 0; min-height: 0; height: 100%; } .col, .col-center { min-height: 0; height: 100%; padding: 1.45% 1.4%; display: flex; flex-direction: column; gap: 1.1%; border-right: 1px solid var(--border); } .col:last-child { border-right: none; } .col-center { padding-left: 1.2%; padding-right: 1.2%; }
7) Replace these common spacing/font blocks
css.section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .section-header { padding: 0.55em 1em; display: flex; align-items: center; gap: 0.55em; border-bottom: 1px solid var(--border); } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1vw, 19px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); } .section-icon { font-size: clamp(13px, 0.95vw, 18px); } .section-body { padding: 0.9em 1em; } p { font-size: clamp(10px, 0.76vw, 14px); line-height: 1.48; color: var(--text); font-weight: 300; }
8) Replace the footer block
css.footer { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 100%); border-top: 2px solid var(--gold); padding: 0.75% 2.2%; display: flex; justify-content: space-between; align-items: center; } .footer-left, .footer-center, .footer-right { font-size: clamp(9px, 0.72vw, 13px); }
9) Replace the print block completely
css@page { size: A1 portrait; margin: 0; } @media print { html, body { width: var(--poster-w); height: var(--poster-h); margin: 0; padding: 0; overflow: hidden; background: none; } body { display: block; } .poster { width: var(--poster-w); height: var(--poster-h); aspect-ratio: auto; margin: 0; page-break-after: avoid; break-after: avoid; } }
10) Add this small safety block near the end of the CSS
This compresses inner elements just enough so the poster fills the page cleanly without overflow or blank leftovers.
css.flow, .tier-block, .feature-grid, .compare-grid, .stat-grid, .tech-tags { gap: 0.45em; } .flow-step, .feature-pill, .stat-box, .anode, .anode-sm, .tier, .compare-before, .compare-label, .compare-after { padding-top: 0.55em; padding-bottom: 0.55em; } ul.mars-list li, .flow-step-desc, .tier-body, .pill-text, .perf-table td, .perf-table th { font-size: clamp(9px, 0.72vw, 13px); line-height: 1.4; }
Important
Your current poster already has placeholder text like:
[Your Name][XXXX][Supervisor Name]
If those stay short, the layout will fit well. If you replace them with long names, reduce .poster-meta font-size a little more.
Best result
If you want it to fill A1 perfectly with zero unused vertical space, also add this one line:
css.body > .col, .body > .col-center { justify-content: space-between; }
That distributes each column’s sections vertically so the full poster height is used.
If you want, I can also give you the fully merged final HTML with these edits already applied.
Domanda
give fully updated code and also u can change the content also to fully occupy the space of a1 size poster, so update css and content also
Pensiero
Risposta
Here is a fully updated A1 poster HTML. I adjusted both the CSS and the content density so the poster fills the page much better and prints cleanly as a true A1 portrait poster with no large empty area left at the bottom.
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MARS – MAQ Autonomous Recruitment System | A1 Poster</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> :root { --gold: #F5C518; --blue: #0A84FF; --teal: #00C6B8; --dark: #080C14; --panel: #0E1420; --card: #121A28; --border: #1E2D45; --text: #D8E6F5; --muted: #7A9BBF; --accent: #FF6B35; --white: #FFFFFF; --purple: #967CFF; --poster-w: 594mm; --poster-h: 841mm; --poster-ratio: 594 / 841; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body { background: #04070F; display: grid; place-items: center; font-family: 'Barlow', sans-serif; } .poster { width: min(100vw, calc(100vh * var(--poster-ratio))); height: min(100vh, calc(100vw / var(--poster-ratio))); aspect-ratio: 594 / 841; background: var(--dark); position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; } .poster::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(10,132,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,132,255,0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; } .blob-1 { width: 32%; height: 22%; background: rgba(10,132,255,0.15); top: -6%; right: -6%; } .blob-2 { width: 26%; height: 20%; background: rgba(0,198,184,0.10); bottom: 16%; left: -7%; } .blob-3 { width: 22%; height: 18%; background: rgba(245,197,24,0.08); top: 42%; right: 10%; } .header { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #0A1628 100%); border-bottom: 3px solid var(--gold); padding: 1.15% 2.1%; display: flex; align-items: center; gap: 1.8%; } .header-logo-block, .header-company { width: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .uni-logo-box, .company-badge { background: white; border-radius: 10px; padding: 10px 14px; border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; max-width: 150px; } .uni-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(17px, 1.35vw, 24px); color: #1A3A6C; line-height: 1; letter-spacing: 2px; } .uni-sub { font-size: clamp(7px, 0.48vw, 10px); font-weight: 700; color: #C8281E; letter-spacing: 1px; text-transform: uppercase; text-align: center; } .uni-grade { font-size: clamp(6px, 0.42vw, 8px); font-weight: 700; background: #C8281E; color: white; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.8px; text-align: center; } .company-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(20px, 1.6vw, 30px); color: #0A1628; letter-spacing: 3px; } .company-sub { font-size: clamp(7px, 0.48vw, 10px); color: #444; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; text-align: center; } .header-center { flex: 1; text-align: center; } .poster-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 4.3vw, 86px); letter-spacing: 0.16em; color: var(--white); line-height: 0.95; text-shadow: 0 0 40px rgba(10,132,255,0.45); } .poster-title span { color: var(--gold); } .poster-subtitle { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1.12vw, 22px); color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.3em; } .poster-meta { margin-top: 0.6em; font-size: clamp(9px, 0.84vw, 16px); color: var(--text); font-weight: 300; line-height: 1.45; } .poster-meta strong { color: var(--gold); font-weight: 600; } .body { position: relative; z-index: 1; display: grid; grid-template-columns: 24.5% 51% 24.5%; min-height: 0; height: 100%; } .col, .col-center { min-height: 0; height: 100%; padding: 1.25% 1.25%; display: flex; flex-direction: column; justify-content: space-between; gap: 1.05%; border-right: 1px solid var(--border); } .col:last-child { border-right: none; } .col-center { padding-left: 1.05%; padding-right: 1.05%; } .section, .arch-full { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset; } .section-header { padding: 0.58em 1em; display: flex; align-items: center; gap: 0.55em; border-bottom: 1px solid var(--border); } .section-header.gold { background: linear-gradient(90deg, rgba(245,197,24,0.15), transparent); border-left: 3px solid var(--gold); } .section-header.blue { background: linear-gradient(90deg, rgba(10,132,255,0.15), transparent); border-left: 3px solid var(--blue); } .section-header.teal { background: linear-gradient(90deg, rgba(0,198,184,0.15), transparent); border-left: 3px solid var(--teal); } .section-header.orange { background: linear-gradient(90deg, rgba(255,107,53,0.15), transparent); border-left: 3px solid var(--accent); } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 0.98vw, 19px); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--white); } .section-icon { font-size: clamp(13px, 0.9vw, 18px); } .section-body { padding: 0.92em 1em; } p { font-size: clamp(9.5px, 0.72vw, 13.6px); line-height: 1.48; color: var(--text); font-weight: 300; } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 8px 0; } .hl { color: var(--gold); font-weight: 600; } .hl-teal { color: var(--teal); font-weight: 600; } .hl-blue { color: #5BAEFF; font-weight: 600; } .flow { display: flex; flex-direction: column; gap: 0.42em; align-items: stretch; } .flow-step { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.7em 0.85em; display: flex; align-items: flex-start; gap: 0.75em; } .flow-step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 16px; flex-shrink: 0; margin-top: 1px; } .flow-step-num.s1 { background: rgba(10,132,255,0.3); color: var(--blue); border: 1.5px solid var(--blue); } .flow-step-num.s2 { background: rgba(245,197,24,0.3); color: var(--gold); border: 1.5px solid var(--gold); } .flow-step-num.s3 { background: rgba(0,198,184,0.3); color: var(--teal); border: 1.5px solid var(--teal); } .flow-step-num.s4 { background: rgba(255,107,53,0.28); color: var(--accent); border: 1.5px solid var(--accent); } .flow-step-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(11px, 0.83vw, 15px); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; line-height: 1.15; } .flow-step-desc { font-size: clamp(8.7px, 0.68vw, 12px); color: var(--muted); margin-top: 3px; line-height: 1.42; } .flow-arrow { text-align: center; font-size: 16px; color: var(--muted); line-height: 1; } .tech-tags { display: flex; flex-wrap: wrap; gap: 0.42em; } .tag { font-family: 'JetBrains Mono', monospace; font-size: clamp(8.2px, 0.63vw, 11px); padding: 0.42em 0.78em; border-radius: 5px; border: 1px solid; font-weight: 700; letter-spacing: 0.4px; line-height: 1.2; } .tag.blue { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.5); color: #5BAEFF; } .tag.teal { background: rgba(0,198,184,0.12); border-color: rgba(0,198,184,0.5); color: #4DDFD6; } .tag.gold { background: rgba(245,197,24,0.12); border-color: rgba(245,197,24,0.5); color: var(--gold); } .tag.orange{ background: rgba(255,107,53,0.12); border-color: rgba(255,107,53,0.5); color: #FF9070; } .tag.purple{ background: rgba(150,100,255,0.12); border-color: rgba(150,100,255,0.5); color: #C0A8FF; } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.48em; } .feature-pill { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 0.7em 0.78em; display: flex; align-items: flex-start; gap: 0.62em; min-height: 0; } .pill-icon { font-size: clamp(13px, 0.88vw, 16px); flex-shrink: 0; margin-top: 1px; } .pill-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(9px, 0.72vw, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); display: block; margin-bottom: 2px; line-height: 1.15; } .pill-text { font-size: clamp(8.8px, 0.68vw, 11.8px); line-height: 1.4; color: var(--text); font-weight: 400; } .arch-full .section-header { border-radius: 0; } .arch-flow-row { display: flex; align-items: stretch; justify-content: center; gap: 0.5em; flex-wrap: nowrap; padding: 0.95em 1em 0.8em; } .anode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0.8em 0.72em; border-radius: 8px; border: 1.5px solid; min-width: 0; flex: 1; text-align: center; } .anode-icon { font-size: clamp(16px, 1.25vw, 22px); } .anode-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(10px, 0.76vw, 13px); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; } .anode-sub { font-size: clamp(7px, 0.56vw, 10px); opacity: 0.78; line-height: 1.25; } .anode.n1 { background: rgba(245,197,24,0.1); border-color: var(--gold); color: var(--gold); } .anode.n2 { background: rgba(10,132,255,0.1); border-color: var(--blue); color: var(--blue); } .anode.n3 { background: rgba(150,100,255,0.1); border-color: var(--purple); color: #C0A8FF; } .anode.n4 { background: rgba(0,198,184,0.1); border-color: var(--teal); color: var(--teal); } .anode.n5 { background: rgba(255,107,53,0.1); border-color: var(--accent); color: var(--accent); } .flow-connector { align-self: center; font-size: clamp(16px, 1.25vw, 22px); color: var(--muted); font-weight: 900; flex-shrink: 0; } .arch-split-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7em; padding: 0 1em 1em; } .arch-sub-nodes { display: flex; flex-direction: column; gap: 0.48em; } .anode-sm { padding: 0.62em 0.8em; border-radius: 7px; border: 1.5px solid; display: flex; align-items: center; gap: 0.55em; font-size: clamp(8.6px, 0.68vw, 12px); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; line-height: 1.22; } .anode-sm.sm-gold { background: rgba(245,197,24,0.08); border-color: rgba(245,197,24,0.4); color: var(--gold); } .anode-sm.sm-blue { background: rgba(10,132,255,0.08); border-color: rgba(10,132,255,0.4); color: #5BAEFF; } .anode-sm.sm-teal { background: rgba(0,198,184,0.08); border-color: rgba(0,198,184,0.4); color: var(--teal); } .anode-sm.sm-purple { background: rgba(150,100,255,0.08); border-color: rgba(150,100,255,0.4); color: #C0A8FF; } .anode-sm.sm-orange { background: rgba(255,107,53,0.08); border-color: rgba(255,107,53,0.4); color: #FF9070; } .split-arrow { font-size: clamp(18px, 1.45vw, 26px); color: var(--muted); font-weight: 900; } .tier-block { display: flex; flex-direction: column; gap: 0.5em; } .tier { background: var(--card); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .tier-header { padding: 0.55em 0.9em; display: flex; align-items: center; gap: 0.55em; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(10px, 0.8vw, 14px); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; flex-wrap: wrap; } .tier-header.intro { background: rgba(10,132,255,0.2); color: #5BAEFF; } .tier-header.inter { background: rgba(245,197,24,0.2); color: var(--gold); } .tier-header.adv { background: rgba(255,107,53,0.2); color: var(--accent); } .tier-body { padding: 0.75em 0.95em; font-size: clamp(8.9px, 0.67vw, 12px); color: var(--text); line-height: 1.4; } .tier-body em { color: var(--muted); font-style: normal; font-size: clamp(7.8px, 0.58vw, 10.5px); font-family: 'JetBrains Mono', monospace; } .tier-q { display: flex; align-items: flex-start; gap: 0.5em; margin-bottom: 0.4em; } .tier-q:last-child { margin-bottom: 0; } .tier-num { font-family: 'JetBrains Mono', monospace; font-size: clamp(7px, 0.52vw, 10px); color: var(--muted); margin-top: 2px; flex-shrink: 0; } .compare-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.45em; margin-bottom: 0.45em; } .compare-header span { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(8.7px, 0.66vw, 12px); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 0.32em 0.72em; border-radius: 4px; text-align: center; } .compare-header .ch-before { background: rgba(255,255,255,0.06); color: var(--muted); } .compare-header .ch-vs { background: var(--gold); color: var(--dark); } .compare-header .ch-after { background: rgba(0,198,184,0.2); color: var(--teal); } .compare-grid { display: flex; flex-direction: column; gap: 0.42em; } .compare-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.45em; } .compare-before, .compare-label, .compare-after { border-radius: 6px; padding: 0.52em 0.72em; line-height: 1.2; } .compare-before { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-size: clamp(8px, 0.62vw, 11px); color: var(--muted); text-align: right; font-weight: 600; } .compare-label { background: var(--card); border: 1px solid var(--border); font-size: clamp(8px, 0.62vw, 11px); color: var(--text); text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; white-space: nowrap; } .compare-after { background: rgba(0,198,184,0.1); border: 1px solid rgba(0,198,184,0.3); font-size: clamp(8.5px, 0.65vw, 12px); color: var(--teal); text-align: left; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; } .stat-box { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.7em 0.6em; text-align: center; } .stat-val { font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 2vw, 36px); line-height: 1; color: var(--teal); } .stat-val.gold { color: var(--gold); } .stat-val.blue { color: var(--blue); } .stat-val.orange { color: var(--accent); } .stat-unit { font-size: clamp(10px, 0.72vw, 14px); color: var(--muted); font-weight: 600; } .stat-label { font-size: clamp(7.8px, 0.58vw, 11px); color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; line-height: 1.25; } .perf-table { width: 100%; border-collapse: collapse; font-size: clamp(8.7px, 0.66vw, 12.6px); margin-top: 0.55em; } .perf-table th { background: var(--card); color: var(--gold); font-family: 'Barlow Condensed', sans-serif; font-size: clamp(8.5px, 0.62vw, 12px); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; padding: 0.55em 0.7em; text-align: left; border-bottom: 1px solid var(--border); } .perf-table td { padding: 0.5em 0.7em; color: var(--text); border-bottom: 1px solid rgba(30,45,69,0.5); vertical-align: middle; line-height: 1.3; } .perf-table tr:last-child td { border-bottom: none; } .perf-val { font-family: 'JetBrains Mono', monospace; font-size: clamp(8.6px, 0.66vw, 12.5px); font-weight: 700; color: var(--teal); } ul.mars-list { list-style: none; display: flex; flex-direction: column; gap: 0.4em; padding: 0; } ul.mars-list li { display: flex; align-items: flex-start; gap: 0.55em; font-size: clamp(8.9px, 0.68vw, 12.6px); color: var(--text); line-height: 1.42; } ul.mars-list li::before { content: '▸'; color: var(--teal); flex-shrink: 0; font-size: 12px; margin-top: 1px; } .mini-points { display: grid; grid-template-columns: 1fr; gap: 0.36em; margin-top: 0.55em; } .mini-point { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 0.58em 0.72em; font-size: clamp(8.5px, 0.64vw, 11.6px); color: var(--text); line-height: 1.35; } .mini-point strong { color: var(--gold); } .footer { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 100%); border-top: 2px solid var(--gold); padding: 0.72% 2.1%; display: flex; justify-content: space-between; align-items: center; gap: 1em; } .footer-left, .footer-center, .footer-right { font-size: clamp(8px, 0.64vw, 12px); color: var(--muted); line-height: 1.38; } .footer-left strong, .footer-center strong, .footer-right strong { color: var(--text); } .footer-center { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; } .footer-right { text-align: right; } @page { size: A1 portrait; margin: 0; } @media print { html, body { width: var(--poster-w); height: var(--poster-h); margin: 0; padding: 0; overflow: hidden; background: none; } body { display: block; } .poster { width: var(--poster-w); height: var(--poster-h); aspect-ratio: auto; margin: 0; page-break-after: avoid; break-after: avoid; } } </style> </head> <body> <div class="poster"> <div class="blob blob-1"></div> <div class="blob blob-2"></div> <div class="blob blob-3"></div> <div class="header"> <div class="header-logo-block"> <div class="uni-logo-box"> <div class="uni-name">NIRMA</div> <div class="uni-name" style="font-size:clamp(11px,0.9vw,14px);letter-spacing:1px;color:#444;">UNIVERSITY</div> <div class="uni-sub">Institute of Technology</div> <div class="uni-grade">NAAC Accredited 'A' Grade</div> </div> </div> <div class="header-center"> <div class="poster-title"><span>MARS</span> — MAQ Autonomous Recruitment System</div> <div class="poster-subtitle">AI-Powered Interview Assistant · Microsoft Teams Integration · Intelligent Recruitment Workflow</div> <div class="poster-meta"> <strong>Your Name</strong> · Roll No: <strong>XXXXXXXX</strong> · Guided by: <strong>Supervisor Name</strong>, MAQ Software · Department of Computer Science & Engineering · Academic Year <strong>2025–26</strong> </div> </div> <div class="header-company"> <div class="company-badge"> <div class="company-name">MAQ</div> <div class="company-sub">Software</div> <div class="company-sub" style="color:#0A84FF;">Microsoft Gold Partner</div> </div> </div> </div> <div class="body"> <!-- LEFT --> <div class="col"> <div class="section"> <div class="section-header gold"> <span class="section-icon">🏢</span> <span class="section-title">Organization Context</span> </div> <div class="section-body"> <p><span class="hl">MAQ Software</span> is a Microsoft-focused engineering and analytics company known for building enterprise-grade BI, cloud, and data solutions for large global clients. The organization emphasizes high development quality, internal tooling, and deep integration with the Microsoft ecosystem.</p> <div class="divider"></div> <p>The internship environment relied heavily on <span class="hl-teal">Microsoft Teams</span>, Azure-based workflows, and structured technical interviews. This created an ideal setting for designing an AI assistant that augments recruiter productivity without forcing users to leave their existing collaboration platform.</p> <div class="divider"></div> <p>MARS was developed as an applied product-oriented solution rather than only a research prototype, with focus on recruiter usability, latency, scalability, and practical deployment feasibility.</p> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">📄</span> <span class="section-title">Problem Statement & Objective</span> </div> <div class="section-body"> <p>Conventional technical recruitment involves repetitive manual work: reading resumes, identifying candidate strengths, preparing multiple levels of questions, tracking market-relevant topics, and improvising follow-up questions during a live interview. These tasks consume time and often introduce inconsistency.</p> <div class="divider"></div> <p>The primary objective of <span class="hl">MARS</span> is to unify these fragmented tasks into one intelligent assistant capable of:</p> <ul class="mars-list" style="margin-top:8px;"> <li>indexing candidate resumes semantically for fast retrieval,</li> <li>generating tiered technical interview questions automatically,</li> <li>supplementing internal questions with market questions,</li> <li>and providing real-time follow-up suggestions during interviews.</li> </ul> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">⚙️</span> <span class="section-title">Methodology</span> </div> <div class="section-body"> <div class="flow"> <div class="flow-step"> <div class="flow-step-num s1">1</div> <div> <div class="flow-step-title">Resume Collection & Parsing</div> <div class="flow-step-desc">Candidate resumes in PDF, DOCX, and TXT formats are extracted from Azure Blob Storage and normalized into machine-readable text.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s2">2</div> <div> <div class="flow-step-title">Embedding & Index Construction</div> <div class="flow-step-desc">Resume chunks are embedded using Azure OpenAI embeddings and stored in a FAISS vector index for low-latency similarity search.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s3">3</div> <div> <div class="flow-step-title">Question Generation Engine</div> <div class="flow-step-desc">GPT-4o uses candidate profile signals to generate 3 difficulty tiers of interview questions mapped to skills, experience, and project context.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s4">4</div> <div> <div class="flow-step-title">Live Assistance Layer</div> <div class="flow-step-desc">The Teams bot listens during the interview, transcribes audio, detects answer gaps, and privately pushes relevant follow-up prompts to the interviewer.</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🛠️</span> <span class="section-title">Technology Stack</span> </div> <div class="section-body"> <div class="tech-tags"> <span class="tag blue">Python 3.11</span> <span class="tag blue">Azure OpenAI</span> <span class="tag blue">GPT-4o</span> <span class="tag teal">FAISS</span> <span class="tag teal">Azure Speech</span> <span class="tag teal">Whisper</span> <span class="tag gold">Microsoft Teams</span> <span class="tag gold">Graph API</span> <span class="tag gold">Bot Framework SDK</span> <span class="tag orange">aiohttp</span> <span class="tag orange">WebSockets</span> <span class="tag orange">asyncio</span> <span class="tag purple">Azure Blob Storage</span> <span class="tag purple">PyPDF2</span> <span class="tag purple">python-docx</span> <span class="tag purple">SeleniumBase</span> <span class="tag blue">Embeddings API</span> </div> </div> </div> </div> <!-- CENTER --> <div class="col-center"> <div class="arch-full"> <div class="section-header blue"> <span class="section-icon">🏗️</span> <span class="section-title">System Architecture</span> </div> <div class="arch-flow-row"> <div class="anode n1"> <span class="anode-icon">👤</span> <span class="anode-label">Interviewer</span> <span class="anode-sub">Starts query in Teams</span> </div> <div class="flow-connector">→</div> <div class="anode n2"> <span class="anode-icon">💬</span> <span class="anode-label">Teams Bot</span> <span class="anode-sub">Receives commands & context</span> </div> <div class="flow-connector">→</div> <div class="anode n3"> <span class="anode-icon">🗄️</span> <span class="anode-label">FAISS Index</span> <span class="anode-sub">Candidate retrieval</span> </div> <div class="flow-connector">→</div> <div class="anode n5"> <span class="anode-icon">🤖</span> <span class="anode-label">GPT-4o</span> <span class="anode-sub">Question & suggestion engine</span> </div> </div> <div class="arch-split-row"> <div class="arch-sub-nodes"> <div class="anode-sm sm-blue">📞 MS Graph Calling API · Join interview call</div> <div class="anode-sm sm-teal">🎙️ Audio stream → PCM frames → speech pipeline</div> <div class="anode-sm sm-purple">📂 Resume chunks + skill metadata + role context</div> </div> <div class="split-arrow">→</div> <div class="arch-sub-nodes"> <div class="anode-sm sm-gold">⚡ Azure Speech Services · low-latency transcription</div> <div class="anode-sm sm-orange">🧠 GPT follow-up generation from live answers</div> <div class="anode-sm sm-purple">💬 Private Teams chat suggestions to interviewer</div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">❓</span> <span class="section-title">Tiered Question Generation</span> </div> <div class="section-body"> <div class="tier-block"> <div class="tier"> <div class="tier-header intro"> 🌱 Introductory <em>7 questions · fundamentals and conceptual clarity</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Explain the difference between <span class="hl-blue">var</span>, <span class="hl-blue">let</span>, and <span class="hl-blue">const</span>.</div> <div class="tier-q"><span class="tier-num">Q2</span> What is the role of the <span class="hl-blue">GIL</span> in Python and when does it matter?</div> <div class="tier-q"><span class="tier-num">Q3</span> What problem do React hooks solve in functional components?</div> <div class="tier-q"><span class="tier-num">Q4</span> What is the difference between SQL joins and when do you use each?</div> </div> </div> <div class="tier"> <div class="tier-header inter"> 🔧 Intermediate <em>7 questions · application, debugging, implementation</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Describe a backend service you designed and how you handled scaling.</div> <div class="tier-q"><span class="tier-num">Q2</span> Explain a difficult production bug and how you isolated the root cause.</div> <div class="tier-q"><span class="tier-num">Q3</span> How did you implement authentication and authorization in your system?</div> <div class="tier-q"><span class="tier-num">Q4</span> How would you improve a slow API with database-heavy endpoints?</div> </div> </div> <div class="tier"> <div class="tier-header adv"> 🚀 Advanced <em>7 questions · architecture, trade-offs, systems thinking</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Design a <span class="hl" style="color:var(--accent);">globally distributed real-time system</span> with low-latency reads.</div> <div class="tier-q"><span class="tier-num">Q2</span> Compare <span class="hl" style="color:var(--accent);">monolith vs microservices</span> under cost, observability, and operational complexity.</div> <div class="tier-q"><span class="tier-num">Q3</span> How would you optimize a database storing <span class="hl" style="color:var(--accent);">100M+ records</span> and mixed workloads?</div> <div class="tier-q"><span class="tier-num">Q4</span> What design would you choose for fault-tolerant asynchronous processing?</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">✨</span> <span class="section-title">Key Features</span> </div> <div class="section-body"> <div class="feature-grid"> <div class="feature-pill"> <span class="pill-icon">🔍</span> <div class="pill-text"> <span class="pill-label">Semantic Retrieval</span> Candidate skills, projects, and tools are retrieved using vector similarity instead of fragile keyword matching. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎯</span> <div class="pill-text"> <span class="pill-label">3-Tier Difficulty</span> Questions are generated across introductory, intermediate, and advanced levels for balanced evaluation. </div> </div> <div class="feature-pill"> <span class="pill-icon">🌐</span> <div class="pill-text"> <span class="pill-label">Market Question Mining</span> Parallel web scraping supplements AI-generated questions with current interview patterns from public sources. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎙️</span> <div class="pill-text"> <span class="pill-label">Live Transcription</span> Real-time speech-to-text enables immediate answer analysis and follow-up prompting within the active interview. </div> </div> <div class="feature-pill"> <span class="pill-icon">💬</span> <div class="pill-text"> <span class="pill-label">Private Guidance</span> Suggestions are delivered privately to the interviewer so the candidate experience remains uninterrupted. </div> </div> <div class="feature-pill"> <span class="pill-icon">⚡</span> <div class="pill-text"> <span class="pill-label">Async Pipeline</span> Retrieval, generation, scraping, and response preparation run concurrently to minimize end-to-end delay. </div> </div> <div class="feature-pill"> <span class="pill-icon">🧩</span> <div class="pill-text"> <span class="pill-label">Teams-Native Workflow</span> The full experience stays inside Microsoft Teams, reducing tool switching and recruiter cognitive load. </div> </div> <div class="feature-pill"> <span class="pill-icon">📈</span> <div class="pill-text"> <span class="pill-label">Scalable Foundation</span> The architecture supports future ATS integration, scorecards, interview summaries, and multilingual expansion. </div> </div> </div> </div> </div> </div> <!-- RIGHT --> <div class="col"> <div class="section"> <div class="section-header teal"> <span class="section-icon">📊</span> <span class="section-title">Results — Efficiency Gains</span> </div> <div class="section-body"> <div class="compare-header"> <span class="ch-before">Manual</span> <span class="ch-vs">VS</span> <span class="ch-after">MARS</span> </div> <div class="compare-grid"> <div class="compare-row"> <div class="compare-before">30–45 min</div> <div class="compare-label">Question Prep</div> <div class="compare-after">~60 s</div> </div> <div class="compare-row"> <div class="compare-before">Manual scan</div> <div class="compare-label">Resume Search</div> <div class="compare-after">< 1 ms</div> </div> <div class="compare-row"> <div class="compare-before">15–25 Q's</div> <div class="compare-label">Question Volume</div> <div class="compare-after">65–120 Q's</div> </div> <div class="compare-row"> <div class="compare-before">No support</div> <div class="compare-label">Live Suggestions</div> <div class="compare-after">200–400 ms</div> </div> <div class="compare-row"> <div class="compare-before">Manual notes</div> <div class="compare-label">Transcription</div> <div class="compare-after">Auto · 93%+</div> </div> <div class="compare-row"> <div class="compare-before">Variable</div> <div class="compare-label">Coverage</div> <div class="compare-after">3-tier structured</div> </div> <div class="compare-row"> <div class="compare-before">Ad hoc</div> <div class="compare-label">Consistency</div> <div class="compare-after">Repeatable flow</div> </div> </div> <div class="mini-points"> <div class="mini-point"><strong>Observed impact:</strong> recruiters spend less time preparing and more time evaluating candidate thinking and communication.</div> <div class="mini-point"><strong>Operational benefit:</strong> standardization improves interview depth across interviewers with different experience levels.</div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">⚡</span> <span class="section-title">Performance Metrics</span> </div> <div class="section-body"> <div class="stat-grid"> <div class="stat-box"> <div class="stat-val gold">~60<span class="stat-unit">s</span></div> <div class="stat-label">First End-to-End Query</div> </div> <div class="stat-box"> <div class="stat-val"><1<span class="stat-unit">ms</span></div> <div class="stat-label">FAISS Lookup</div> </div> <div class="stat-box"> <div class="stat-val blue">200<span class="stat-unit">ms</span></div> <div class="stat-label">Speech Latency</div> </div> <div class="stat-box"> <div class="stat-val orange">120</div> <div class="stat-label">Max Questions / Candidate</div> </div> </div> <table class="perf-table"> <tr><th>Operation</th><th>Time</th></tr> <tr><td>Resume parsing + chunking</td><td><span class="perf-val">~5–10 s</span></td></tr> <tr><td>Indexing one resume</td><td><span class="perf-val">~10 s</span></td></tr> <tr><td>Semantic candidate search</td><td><span class="perf-val">~0.5 s</span></td></tr> <tr><td>AI question generation</td><td><span class="perf-val">~20–30 s</span></td></tr> <tr><td>Web question scraping</td><td><span class="perf-val">~30–60 s</span></td></tr> <tr><td>Live follow-up delivery</td><td><span class="perf-val">200–400 ms</span></td></tr> </table> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">💡</span> <span class="section-title">Discussion & Challenges</span> </div> <div class="section-body"> <p>MARS validates that a recruiter-assist system can be embedded inside the Microsoft collaboration ecosystem while preserving natural interviewer workflow. The assistant is most valuable not as a replacement for human judgment, but as a <span class="hl">context-aware augmentation layer</span> that improves consistency, recall, and speed.</p> <div class="divider"></div> <p>Several engineering challenges shaped the final design. The <span class="hl-teal">Graph Calling API</span> required a public HTTPS deployment for bot accessibility. Whisper delivered high-quality transcription but introduced higher latency, which made <span class="hl-blue">Azure Speech</span> preferable for real-time interactions. Resume lookups also required fuzzy matching logic to tolerate naming and formatting variation.</p> <div class="divider"></div> <p>In user acceptance testing, interviewers responded positively to the structured question tiers, live prompts, and seamless Teams integration. The strongest practical benefit was the ability to keep the conversation flowing while receiving quiet assistance in the background.</p> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🎯</span> <span class="section-title">Conclusion & Future Work</span> </div> <div class="section-body"> <ul class="mars-list"> <li>MARS successfully integrates resume intelligence, question generation, and live interview support into one unified recruiter workflow.</li> <li>The project demonstrates applied use of Azure OpenAI, speech services, vector search, asynchronous Python services, and Microsoft Teams automation.</li> <li>Structured question generation improves fairness and repeatability across technical interviews.</li> <li>Real-time assistance reduces interviewer preparation burden while increasing interview depth.</li> <li><strong style="color:var(--gold);">Future scope:</strong> ATS integration (Greenhouse / Workday), candidate scoring with explainability, multilingual interviews, caching for faster repeated queries, and automated post-interview summary reports.</li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer-left"> <strong>Your Name</strong> · Roll No: XXXXXXXX · Dept. of Computer Science & Engineering<br> Nirma University, Ahmedabad · Academic Year 2025–26 </div> <div class="footer-center"> <strong>MARS — MAQ Autonomous Recruitment System</strong><br> Internship Project · Intelligent AI Recruitment Assistant </div> <div class="footer-right"> Guided by: <strong>Supervisor Name</strong><br> MAQ Software · Microsoft Gold Partner </div> </div> </div> </body> </html>
A couple of notes:
- This version is built to occupy the A1 page fully using
grid-template-rows: auto 1fr auto, tighter spacing, and fuller content blocks. - Replace
Your Name,XXXXXXXX, andSupervisor Namewith your real details. - For best print result, open in browser and print with Margins: None and Scale: 100%.
I can also give you a second version that is even more “conference-poster style” with bigger diagrams and less text.
Domanda
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MARS – MAQ Autonomous Recruitment System | A1 Poster</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--gold: #F5C518;
--blue: #0A84FF;
--teal: #00C6B8;
--dark: #080C14;
--panel: #0E1420;
--card: #121A28;
--border: #1E2D45;
--text: #D8E6F5;
--muted: #7A9BBF;
--accent: #FF6B35;
--white: #FFFFFF;
--purple: #967CFF;
--poster-w: 594mm;
--poster-h: 841mm;
--poster-ratio: 594 / 841;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background: #04070F;
display: grid;
place-items: center;
font-family: 'Barlow', sans-serif;
}
.poster {
width: min(100vw, calc(100vh * var(--poster-ratio)));
height: min(100vh, calc(100vw / var(--poster-ratio)));
aspect-ratio: 594 / 841;
background: var(--dark);
position: relative;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
}
.poster::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(10,132,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,132,255,0.04) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(110px);
pointer-events: none;
z-index: 0;
}
.blob-1 { width: 32%; height: 22%; background: rgba(10,132,255,0.15); top: -6%; right: -6%; }
.blob-2 { width: 26%; height: 20%; background: rgba(0,198,184,0.10); bottom: 16%; left: -7%; }
.blob-3 { width: 22%; height: 18%; background: rgba(245,197,24,0.08); top: 42%; right: 10%; }
.header {
position: relative;
z-index: 1;
background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #0A1628 100%);
border-bottom: 3px solid var(--gold);
padding: 1.15% 2.1%;
display: flex;
align-items: center;
gap: 1.8%;
}
.header-logo-block,
.header-company {
width: 14%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.uni-logo-box,
.company-badge {
background: white;
border-radius: 10px;
padding: 10px 14px;
border: 2px solid var(--gold);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 100%;
max-width: 150px;
}
.uni-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(17px, 1.35vw, 24px);
color: #1A3A6C;
line-height: 1;
letter-spacing: 2px;
}
.uni-sub {
font-size: clamp(7px, 0.48vw, 10px);
font-weight: 700;
color: #C8281E;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
}
.uni-grade {
font-size: clamp(6px, 0.42vw, 8px);
font-weight: 700;
background: #C8281E;
color: white;
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.8px;
text-align: center;
}
.company-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(20px, 1.6vw, 30px);
color: #0A1628;
letter-spacing: 3px;
}
.company-sub {
font-size: clamp(7px, 0.48vw, 10px);
color: #444;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
.header-center {
flex: 1;
text-align: center;
}
.poster-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(44px, 4.3vw, 86px);
letter-spacing: 0.16em;
color: var(--white);
line-height: 0.95;
text-shadow: 0 0 40px rgba(10,132,255,0.45);
}
.poster-title span {
color: var(--gold);
}
.poster-subtitle {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(12px, 1.12vw, 22px);
color: var(--teal);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 0.3em;
}
.poster-meta {
margin-top: 0.6em;
font-size: clamp(9px, 0.84vw, 16px);
color: var(--text);
font-weight: 300;
line-height: 1.45;
}
.poster-meta strong {
color: var(--gold);
font-weight: 600;
}
.body {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 24.5% 51% 24.5%;
min-height: 0;
height: 100%;
}
.col,
.col-center {
min-height: 0;
height: 100%;
padding: 1.25% 1.25%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.05%;
border-right: 1px solid var(--border);
}
.col:last-child {
border-right: none;
}
.col-center {
padding-left: 1.05%;
padding-right: 1.05%;
}
.section,
.arch-full {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset;
}
.section-header {
padding: 0.58em 1em;
display: flex;
align-items: center;
gap: 0.55em;
border-bottom: 1px solid var(--border);
}
.section-header.gold {
background: linear-gradient(90deg, rgba(245,197,24,0.15), transparent);
border-left: 3px solid var(--gold);
}
.section-header.blue {
background: linear-gradient(90deg, rgba(10,132,255,0.15), transparent);
border-left: 3px solid var(--blue);
}
.section-header.teal {
background: linear-gradient(90deg, rgba(0,198,184,0.15), transparent);
border-left: 3px solid var(--teal);
}
.section-header.orange {
background: linear-gradient(90deg, rgba(255,107,53,0.15), transparent);
border-left: 3px solid var(--accent);
}
.section-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(12px, 0.98vw, 19px);
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--white);
}
.section-icon {
font-size: clamp(13px, 0.9vw, 18px);
}
.section-body {
padding: 0.92em 1em;
}
p {
font-size: clamp(9.5px, 0.72vw, 13.6px);
line-height: 1.48;
color: var(--text);
font-weight: 300;
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 8px 0;
}
.hl { color: var(--gold); font-weight: 600; }
.hl-teal { color: var(--teal); font-weight: 600; }
.hl-blue { color: #5BAEFF; font-weight: 600; }
.flow {
display: flex;
flex-direction: column;
gap: 0.42em;
align-items: stretch;
}
.flow-step {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7em 0.85em;
display: flex;
align-items: flex-start;
gap: 0.75em;
}
.flow-step-num {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.flow-step-num.s1 { background: rgba(10,132,255,0.3); color: var(--blue); border: 1.5px solid var(--blue); }
.flow-step-num.s2 { background: rgba(245,197,24,0.3); color: var(--gold); border: 1.5px solid var(--gold); }
.flow-step-num.s3 { background: rgba(0,198,184,0.3); color: var(--teal); border: 1.5px solid var(--teal); }
.flow-step-num.s4 { background: rgba(255,107,53,0.28); color: var(--accent); border: 1.5px solid var(--accent); }
.flow-step-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(11px, 0.83vw, 15px);
font-weight: 700;
color: var(--white);
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.15;
}
.flow-step-desc {
font-size: clamp(8.7px, 0.68vw, 12px);
color: var(--muted);
margin-top: 3px;
line-height: 1.42;
}
.flow-arrow {
text-align: center;
font-size: 16px;
color: var(--muted);
line-height: 1;
}
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.42em;
}
.tag {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(8.2px, 0.63vw, 11px);
padding: 0.42em 0.78em;
border-radius: 5px;
border: 1px solid;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1.2;
}
.tag.blue { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.5); color: #5BAEFF; }
.tag.teal { background: rgba(0,198,184,0.12); border-color: rgba(0,198,184,0.5); color: #4DDFD6; }
.tag.gold { background: rgba(245,197,24,0.12); border-color: rgba(245,197,24,0.5); color: var(--gold); }
.tag.orange{ background: rgba(255,107,53,0.12); border-color: rgba(255,107,53,0.5); color: #FF9070; }
.tag.purple{ background: rgba(150,100,255,0.12); border-color: rgba(150,100,255,0.5); color: #C0A8FF; }
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.48em;
}
.feature-pill {
background: var(--card);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.7em 0.78em;
display: flex;
align-items: flex-start;
gap: 0.62em;
min-height: 0;
}
.pill-icon {
font-size: clamp(13px, 0.88vw, 16px);
flex-shrink: 0;
margin-top: 1px;
}
.pill-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(9px, 0.72vw, 12px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--teal);
display: block;
margin-bottom: 2px;
line-height: 1.15;
}
.pill-text {
font-size: clamp(8.8px, 0.68vw, 11.8px);
line-height: 1.4;
color: var(--text);
font-weight: 400;
}
.arch-full .section-header {
border-radius: 0;
}
.arch-flow-row {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0.5em;
flex-wrap: nowrap;
padding: 0.95em 1em 0.8em;
}
.anode {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0.8em 0.72em;
border-radius: 8px;
border: 1.5px solid;
min-width: 0;
flex: 1;
text-align: center;
}
.anode-icon {
font-size: clamp(16px, 1.25vw, 22px);
}
.anode-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(10px, 0.76vw, 13px);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.1;
}
.anode-sub {
font-size: clamp(7px, 0.56vw, 10px);
opacity: 0.78;
line-height: 1.25;
}
.anode.n1 { background: rgba(245,197,24,0.1); border-color: var(--gold); color: var(--gold); }
.anode.n2 { background: rgba(10,132,255,0.1); border-color: var(--blue); color: var(--blue); }
.anode.n3 { background: rgba(150,100,255,0.1); border-color: var(--purple); color: #C0A8FF; }
.anode.n4 { background: rgba(0,198,184,0.1); border-color: var(--teal); color: var(--teal); }
.anode.n5 { background: rgba(255,107,53,0.1); border-color: var(--accent); color: var(--accent); }
.flow-connector {
align-self: center;
font-size: clamp(16px, 1.25vw, 22px);
color: var(--muted);
font-weight: 900;
flex-shrink: 0;
}
.arch-split-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.7em;
padding: 0 1em 1em;
}
.arch-sub-nodes {
display: flex;
flex-direction: column;
gap: 0.48em;
}
.anode-sm {
padding: 0.62em 0.8em;
border-radius: 7px;
border: 1.5px solid;
display: flex;
align-items: center;
gap: 0.55em;
font-size: clamp(8.6px, 0.68vw, 12px);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
line-height: 1.22;
}
.anode-sm.sm-gold { background: rgba(245,197,24,0.08); border-color: rgba(245,197,24,0.4); color: var(--gold); }
.anode-sm.sm-blue { background: rgba(10,132,255,0.08); border-color: rgba(10,132,255,0.4); color: #5BAEFF; }
.anode-sm.sm-teal { background: rgba(0,198,184,0.08); border-color: rgba(0,198,184,0.4); color: var(--teal); }
.anode-sm.sm-purple { background: rgba(150,100,255,0.08); border-color: rgba(150,100,255,0.4); color: #C0A8FF; }
.anode-sm.sm-orange { background: rgba(255,107,53,0.08); border-color: rgba(255,107,53,0.4); color: #FF9070; }
.split-arrow {
font-size: clamp(18px, 1.45vw, 26px);
color: var(--muted);
font-weight: 900;
}
.tier-block {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.tier {
background: var(--card);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.tier-header {
padding: 0.55em 0.9em;
display: flex;
align-items: center;
gap: 0.55em;
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(10px, 0.8vw, 14px);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.2;
flex-wrap: wrap;
}
.tier-header.intro { background: rgba(10,132,255,0.2); color: #5BAEFF; }
.tier-header.inter { background: rgba(245,197,24,0.2); color: var(--gold); }
.tier-header.adv { background: rgba(255,107,53,0.2); color: var(--accent); }
.tier-body {
padding: 0.75em 0.95em;
font-size: clamp(8.9px, 0.67vw, 12px);
color: var(--text);
line-height: 1.4;
}
.tier-body em {
color: var(--muted);
font-style: normal;
font-size: clamp(7.8px, 0.58vw, 10.5px);
font-family: 'JetBrains Mono', monospace;
}
.tier-q {
display: flex;
align-items: flex-start;
gap: 0.5em;
margin-bottom: 0.4em;
}
.tier-q:last-child {
margin-bottom: 0;
}
.tier-num {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(7px, 0.52vw, 10px);
color: var(--muted);
margin-top: 2px;
flex-shrink: 0;
}
.compare-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.45em;
margin-bottom: 0.45em;
}
.compare-header span {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(8.7px, 0.66vw, 12px);
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 0.32em 0.72em;
border-radius: 4px;
text-align: center;
}
.compare-header .ch-before { background: rgba(255,255,255,0.06); color: var(--muted); }
.compare-header .ch-vs { background: var(--gold); color: var(--dark); }
.compare-header .ch-after { background: rgba(0,198,184,0.2); color: var(--teal); }
.compare-grid {
display: flex;
flex-direction: column;
gap: 0.42em;
}
.compare-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.45em;
}
.compare-before,
.compare-label,
.compare-after {
border-radius: 6px;
padding: 0.52em 0.72em;
line-height: 1.2;
}
.compare-before {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
font-size: clamp(8px, 0.62vw, 11px);
color: var(--muted);
text-align: right;
font-weight: 600;
}
.compare-label {
background: var(--card);
border: 1px solid var(--border);
font-size: clamp(8px, 0.62vw, 11px);
color: var(--text);
text-align: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.9px;
white-space: nowrap;
}
.compare-after {
background: rgba(0,198,184,0.1);
border: 1px solid rgba(0,198,184,0.3);
font-size: clamp(8.5px, 0.65vw, 12px);
color: var(--teal);
text-align: left;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45em;
}
.stat-box {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7em 0.6em;
text-align: center;
}
.stat-val {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(24px, 2vw, 36px);
line-height: 1;
color: var(--teal);
}
.stat-val.gold { color: var(--gold); }
.stat-val.blue { color: var(--blue); }
.stat-val.orange { color: var(--accent); }
.stat-unit {
font-size: clamp(10px, 0.72vw, 14px);
color: var(--muted);
font-weight: 600;
}
.stat-label {
font-size: clamp(7.8px, 0.58vw, 11px);
color: var(--muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
line-height: 1.25;
}
.perf-table {
width: 100%;
border-collapse: collapse;
font-size: clamp(8.7px, 0.66vw, 12.6px);
margin-top: 0.55em;
}
.perf-table th {
background: var(--card);
color: var(--gold);
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(8.5px, 0.62vw, 12px);
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 0.55em 0.7em;
text-align: left;
border-bottom: 1px solid var(--border);
}
.perf-table td {
padding: 0.5em 0.7em;
color: var(--text);
border-bottom: 1px solid rgba(30,45,69,0.5);
vertical-align: middle;
line-height: 1.3;
}
.perf-table tr:last-child td {
border-bottom: none;
}
.perf-val {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(8.6px, 0.66vw, 12.5px);
font-weight: 700;
color: var(--teal);
}
ul.mars-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4em;
padding: 0;
}
ul.mars-list li {
display: flex;
align-items: flex-start;
gap: 0.55em;
font-size: clamp(8.9px, 0.68vw, 12.6px);
color: var(--text);
line-height: 1.42;
}
ul.mars-list li::before {
content: '▸';
color: var(--teal);
flex-shrink: 0;
font-size: 12px;
margin-top: 1px;
}
.mini-points {
display: grid;
grid-template-columns: 1fr;
gap: 0.36em;
margin-top: 0.55em;
}
.mini-point {
background: var(--card);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.58em 0.72em;
font-size: clamp(8.5px, 0.64vw, 11.6px);
color: var(--text);
line-height: 1.35;
}
.mini-point strong {
color: var(--gold);
}
.footer {
position: relative;
z-index: 1;
background: linear-gradient(135deg, #0A1628 0%, #0D1E38 100%);
border-top: 2px solid var(--gold);
padding: 0.72% 2.1%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
}
.footer-left,
.footer-center,
.footer-right {
font-size: clamp(8px, 0.64vw, 12px);
color: var(--muted);
line-height: 1.38;
}
.footer-left strong,
.footer-center strong,
.footer-right strong {
color: var(--text);
}
.footer-center {
font-family: 'Barlow Condensed', sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
text-align: center;
}
.footer-right {
text-align: right;
}
@page {
size: A1 portrait;
margin: 0;
}
@media print {
html, body {
width: var(--poster-w);
height: var(--poster-h);
margin: 0;
padding: 0;
overflow: hidden;
background: none;
}
body {
display: block;
}
.poster {
width: var(--poster-w);
height: var(--poster-h);
aspect-ratio: auto;
margin: 0;
page-break-after: avoid;
break-after: avoid;
}
}
</style>
</head>
<body>
<div class="poster">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
</div> </body> </html>text<div class="header"> <div class="header-logo-block"> <div class="uni-logo-box"> <div class="uni-name">NIRMA</div> <div class="uni-name" style="font-size:clamp(11px,0.9vw,14px);letter-spacing:1px;color:#444;">UNIVERSITY</div> <div class="uni-sub">Institute of Technology</div> <div class="uni-grade">NAAC Accredited 'A' Grade</div> </div> </div> <div class="header-center"> <div class="poster-title"><span>MARS</span> — MAQ Autonomous Recruitment System</div> <div class="poster-subtitle">AI-Powered Interview Assistant · Microsoft Teams Integration · Intelligent Recruitment Workflow</div> <div class="poster-meta"> <strong>Your Name</strong> · Roll No: <strong>XXXXXXXX</strong> · Guided by: <strong>Supervisor Name</strong>, MAQ Software · Department of Computer Science & Engineering · Academic Year <strong>2025–26</strong> </div> </div> <div class="header-company"> <div class="company-badge"> <div class="company-name">MAQ</div> <div class="company-sub">Software</div> <div class="company-sub" style="color:#0A84FF;">Microsoft Gold Partner</div> </div> </div> </div> <div class="body"> <!-- LEFT --> <div class="col"> <div class="section"> <div class="section-header gold"> <span class="section-icon">🏢</span> <span class="section-title">Organization Context</span> </div> <div class="section-body"> <p><span class="hl">MAQ Software</span> is a Microsoft-focused engineering and analytics company known for building enterprise-grade BI, cloud, and data solutions for large global clients. The organization emphasizes high development quality, internal tooling, and deep integration with the Microsoft ecosystem.</p> <div class="divider"></div> <p>The internship environment relied heavily on <span class="hl-teal">Microsoft Teams</span>, Azure-based workflows, and structured technical interviews. This created an ideal setting for designing an AI assistant that augments recruiter productivity without forcing users to leave their existing collaboration platform.</p> <div class="divider"></div> <p>MARS was developed as an applied product-oriented solution rather than only a research prototype, with focus on recruiter usability, latency, scalability, and practical deployment feasibility.</p> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">📄</span> <span class="section-title">Problem Statement & Objective</span> </div> <div class="section-body"> <p>Conventional technical recruitment involves repetitive manual work: reading resumes, identifying candidate strengths, preparing multiple levels of questions, tracking market-relevant topics, and improvising follow-up questions during a live interview. These tasks consume time and often introduce inconsistency.</p> <div class="divider"></div> <p>The primary objective of <span class="hl">MARS</span> is to unify these fragmented tasks into one intelligent assistant capable of:</p> <ul class="mars-list" style="margin-top:8px;"> <li>indexing candidate resumes semantically for fast retrieval,</li> <li>generating tiered technical interview questions automatically,</li> <li>supplementing internal questions with market questions,</li> <li>and providing real-time follow-up suggestions during interviews.</li> </ul> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">⚙️</span> <span class="section-title">Methodology</span> </div> <div class="section-body"> <div class="flow"> <div class="flow-step"> <div class="flow-step-num s1">1</div> <div> <div class="flow-step-title">Resume Collection & Parsing</div> <div class="flow-step-desc">Candidate resumes in PDF, DOCX, and TXT formats are extracted from Azure Blob Storage and normalized into machine-readable text.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s2">2</div> <div> <div class="flow-step-title">Embedding & Index Construction</div> <div class="flow-step-desc">Resume chunks are embedded using Azure OpenAI embeddings and stored in a FAISS vector index for low-latency similarity search.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s3">3</div> <div> <div class="flow-step-title">Question Generation Engine</div> <div class="flow-step-desc">GPT-4o uses candidate profile signals to generate 3 difficulty tiers of interview questions mapped to skills, experience, and project context.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s4">4</div> <div> <div class="flow-step-title">Live Assistance Layer</div> <div class="flow-step-desc">The Teams bot listens during the interview, transcribes audio, detects answer gaps, and privately pushes relevant follow-up prompts to the interviewer.</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🛠️</span> <span class="section-title">Technology Stack</span> </div> <div class="section-body"> <div class="tech-tags"> <span class="tag blue">Python 3.11</span> <span class="tag blue">Azure OpenAI</span> <span class="tag blue">GPT-4o</span> <span class="tag teal">FAISS</span> <span class="tag teal">Azure Speech</span> <span class="tag teal">Whisper</span> <span class="tag gold">Microsoft Teams</span> <span class="tag gold">Graph API</span> <span class="tag gold">Bot Framework SDK</span> <span class="tag orange">aiohttp</span> <span class="tag orange">WebSockets</span> <span class="tag orange">asyncio</span> <span class="tag purple">Azure Blob Storage</span> <span class="tag purple">PyPDF2</span> <span class="tag purple">python-docx</span> <span class="tag purple">SeleniumBase</span> <span class="tag blue">Embeddings API</span> </div> </div> </div> </div> <!-- CENTER --> <div class="col-center"> <div class="arch-full"> <div class="section-header blue"> <span class="section-icon">🏗️</span> <span class="section-title">System Architecture</span> </div> <div class="arch-flow-row"> <div class="anode n1"> <span class="anode-icon">👤</span> <span class="anode-label">Interviewer</span> <span class="anode-sub">Starts query in Teams</span> </div> <div class="flow-connector">→</div> <div class="anode n2"> <span class="anode-icon">💬</span> <span class="anode-label">Teams Bot</span> <span class="anode-sub">Receives commands & context</span> </div> <div class="flow-connector">→</div> <div class="anode n3"> <span class="anode-icon">🗄️</span> <span class="anode-label">FAISS Index</span> <span class="anode-sub">Candidate retrieval</span> </div> <div class="flow-connector">→</div> <div class="anode n5"> <span class="anode-icon">🤖</span> <span class="anode-label">GPT-4o</span> <span class="anode-sub">Question & suggestion engine</span> </div> </div> <div class="arch-split-row"> <div class="arch-sub-nodes"> <div class="anode-sm sm-blue">📞 MS Graph Calling API · Join interview call</div> <div class="anode-sm sm-teal">🎙️ Audio stream → PCM frames → speech pipeline</div> <div class="anode-sm sm-purple">📂 Resume chunks + skill metadata + role context</div> </div> <div class="split-arrow">→</div> <div class="arch-sub-nodes"> <div class="anode-sm sm-gold">⚡ Azure Speech Services · low-latency transcription</div> <div class="anode-sm sm-orange">🧠 GPT follow-up generation from live answers</div> <div class="anode-sm sm-purple">💬 Private Teams chat suggestions to interviewer</div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">❓</span> <span class="section-title">Tiered Question Generation</span> </div> <div class="section-body"> <div class="tier-block"> <div class="tier"> <div class="tier-header intro"> 🌱 Introductory <em>7 questions · fundamentals and conceptual clarity</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Explain the difference between <span class="hl-blue">var</span>, <span class="hl-blue">let</span>, and <span class="hl-blue">const</span>.</div> <div class="tier-q"><span class="tier-num">Q2</span> What is the role of the <span class="hl-blue">GIL</span> in Python and when does it matter?</div> <div class="tier-q"><span class="tier-num">Q3</span> What problem do React hooks solve in functional components?</div> <div class="tier-q"><span class="tier-num">Q4</span> What is the difference between SQL joins and when do you use each?</div> </div> </div> <div class="tier"> <div class="tier-header inter"> 🔧 Intermediate <em>7 questions · application, debugging, implementation</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Describe a backend service you designed and how you handled scaling.</div> <div class="tier-q"><span class="tier-num">Q2</span> Explain a difficult production bug and how you isolated the root cause.</div> <div class="tier-q"><span class="tier-num">Q3</span> How did you implement authentication and authorization in your system?</div> <div class="tier-q"><span class="tier-num">Q4</span> How would you improve a slow API with database-heavy endpoints?</div> </div> </div> <div class="tier"> <div class="tier-header adv"> 🚀 Advanced <em>7 questions · architecture, trade-offs, systems thinking</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Design a <span class="hl" style="color:var(--accent);">globally distributed real-time system</span> with low-latency reads.</div> <div class="tier-q"><span class="tier-num">Q2</span> Compare <span class="hl" style="color:var(--accent);">monolith vs microservices</span> under cost, observability, and operational complexity.</div> <div class="tier-q"><span class="tier-num">Q3</span> How would you optimize a database storing <span class="hl" style="color:var(--accent);">100M+ records</span> and mixed workloads?</div> <div class="tier-q"><span class="tier-num">Q4</span> What design would you choose for fault-tolerant asynchronous processing?</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">✨</span> <span class="section-title">Key Features</span> </div> <div class="section-body"> <div class="feature-grid"> <div class="feature-pill"> <span class="pill-icon">🔍</span> <div class="pill-text"> <span class="pill-label">Semantic Retrieval</span> Candidate skills, projects, and tools are retrieved using vector similarity instead of fragile keyword matching. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎯</span> <div class="pill-text"> <span class="pill-label">3-Tier Difficulty</span> Questions are generated across introductory, intermediate, and advanced levels for balanced evaluation. </div> </div> <div class="feature-pill"> <span class="pill-icon">🌐</span> <div class="pill-text"> <span class="pill-label">Market Question Mining</span> Parallel web scraping supplements AI-generated questions with current interview patterns from public sources. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎙️</span> <div class="pill-text"> <span class="pill-label">Live Transcription</span> Real-time speech-to-text enables immediate answer analysis and follow-up prompting within the active interview. </div> </div> <div class="feature-pill"> <span class="pill-icon">💬</span> <div class="pill-text"> <span class="pill-label">Private Guidance</span> Suggestions are delivered privately to the interviewer so the candidate experience remains uninterrupted. </div> </div> <div class="feature-pill"> <span class="pill-icon">⚡</span> <div class="pill-text"> <span class="pill-label">Async Pipeline</span> Retrieval, generation, scraping, and response preparation run concurrently to minimize end-to-end delay. </div> </div> <div class="feature-pill"> <span class="pill-icon">🧩</span> <div class="pill-text"> <span class="pill-label">Teams-Native Workflow</span> The full experience stays inside Microsoft Teams, reducing tool switching and recruiter cognitive load. </div> </div> <div class="feature-pill"> <span class="pill-icon">📈</span> <div class="pill-text"> <span class="pill-label">Scalable Foundation</span> The architecture supports future ATS integration, scorecards, interview summaries, and multilingual expansion. </div> </div> </div> </div> </div> </div> <!-- RIGHT --> <div class="col"> <div class="section"> <div class="section-header teal"> <span class="section-icon">📊</span> <span class="section-title">Results — Efficiency Gains</span> </div> <div class="section-body"> <div class="compare-header"> <span class="ch-before">Manual</span> <span class="ch-vs">VS</span> <span class="ch-after">MARS</span> </div> <div class="compare-grid"> <div class="compare-row"> <div class="compare-before">30–45 min</div> <div class="compare-label">Question Prep</div> <div class="compare-after">~60 s</div> </div> <div class="compare-row"> <div class="compare-before">Manual scan</div> <div class="compare-label">Resume Search</div> <div class="compare-after">< 1 ms</div> </div> <div class="compare-row"> <div class="compare-before">15–25 Q's</div> <div class="compare-label">Question Volume</div> <div class="compare-after">65–120 Q's</div> </div> <div class="compare-row"> <div class="compare-before">No support</div> <div class="compare-label">Live Suggestions</div> <div class="compare-after">200–400 ms</div> </div> <div class="compare-row"> <div class="compare-before">Manual notes</div> <div class="compare-label">Transcription</div> <div class="compare-after">Auto · 93%+</div> </div> <div class="compare-row"> <div class="compare-before">Variable</div> <div class="compare-label">Coverage</div> <div class="compare-after">3-tier structured</div> </div> <div class="compare-row"> <div class="compare-before">Ad hoc</div> <div class="compare-label">Consistency</div> <div class="compare-after">Repeatable flow</div> </div> </div> <div class="mini-points"> <div class="mini-point"><strong>Observed impact:</strong> recruiters spend less time preparing and more time evaluating candidate thinking and communication.</div> <div class="mini-point"><strong>Operational benefit:</strong> standardization improves interview depth across interviewers with different experience levels.</div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">⚡</span> <span class="section-title">Performance Metrics</span> </div> <div class="section-body"> <div class="stat-grid"> <div class="stat-box"> <div class="stat-val gold">~60<span class="stat-unit">s</span></div> <div class="stat-label">First End-to-End Query</div> </div> <div class="stat-box"> <div class="stat-val"><1<span class="stat-unit">ms</span></div> <div class="stat-label">FAISS Lookup</div> </div> <div class="stat-box"> <div class="stat-val blue">200<span class="stat-unit">ms</span></div> <div class="stat-label">Speech Latency</div> </div> <div class="stat-box"> <div class="stat-val orange">120</div> <div class="stat-label">Max Questions / Candidate</div> </div> </div> <table class="perf-table"> <tr><th>Operation</th><th>Time</th></tr> <tr><td>Resume parsing + chunking</td><td><span class="perf-val">~5–10 s</span></td></tr> <tr><td>Indexing one resume</td><td><span class="perf-val">~10 s</span></td></tr> <tr><td>Semantic candidate search</td><td><span class="perf-val">~0.5 s</span></td></tr> <tr><td>AI question generation</td><td><span class="perf-val">~20–30 s</span></td></tr> <tr><td>Web question scraping</td><td><span class="perf-val">~30–60 s</span></td></tr> <tr><td>Live follow-up delivery</td><td><span class="perf-val">200–400 ms</span></td></tr> </table> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">💡</span> <span class="section-title">Discussion & Challenges</span> </div> <div class="section-body"> <p>MARS validates that a recruiter-assist system can be embedded inside the Microsoft collaboration ecosystem while preserving natural interviewer workflow. The assistant is most valuable not as a replacement for human judgment, but as a <span class="hl">context-aware augmentation layer</span> that improves consistency, recall, and speed.</p> <div class="divider"></div> <p>Several engineering challenges shaped the final design. The <span class="hl-teal">Graph Calling API</span> required a public HTTPS deployment for bot accessibility. Whisper delivered high-quality transcription but introduced higher latency, which made <span class="hl-blue">Azure Speech</span> preferable for real-time interactions. Resume lookups also required fuzzy matching logic to tolerate naming and formatting variation.</p> <div class="divider"></div> <p>In user acceptance testing, interviewers responded positively to the structured question tiers, live prompts, and seamless Teams integration. The strongest practical benefit was the ability to keep the conversation flowing while receiving quiet assistance in the background.</p> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🎯</span> <span class="section-title">Conclusion & Future Work</span> </div> <div class="section-body"> <ul class="mars-list"> <li>MARS successfully integrates resume intelligence, question generation, and live interview support into one unified recruiter workflow.</li> <li>The project demonstrates applied use of Azure OpenAI, speech services, vector search, asynchronous Python services, and Microsoft Teams automation.</li> <li>Structured question generation improves fairness and repeatability across technical interviews.</li> <li>Real-time assistance reduces interviewer preparation burden while increasing interview depth.</li> <li><strong style="color:var(--gold);">Future scope:</strong> ATS integration (Greenhouse / Workday), candidate scoring with explainability, multilingual interviews, caching for faster repeated queries, and automated post-interview summary reports.</li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer-left"> <strong>Your Name</strong> · Roll No: XXXXXXXX · Dept. of Computer Science & Engineering<br> Nirma University, Ahmedabad · Academic Year 2025–26 </div> <div class="footer-center"> <strong>MARS — MAQ Autonomous Recruitment System</strong><br> Internship Project · Intelligent AI Recruitment Assistant </div> <div class="footer-right"> Guided by: <strong>Supervisor Name</strong><br> MAQ Software · Microsoft Gold Partner </div> </div>
update to a1 size fully occupied and same theme. u can update the content and stylng also.
Pensiero
Risposta
Use this fully updated version. It keeps the same dark futuristic theme, increases content density a bit, and forces the layout to occupy the full A1 poster height more consistently by using a fixed full-height grid, balanced column distribution, slightly denser cards, and a taller center architecture block.
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MARS – MAQ Autonomous Recruitment System | A1 Poster</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> :root { --gold: #F5C518; --blue: #0A84FF; --teal: #00C6B8; --dark: #080C14; --panel: #0E1420; --card: #121A28; --border: #1E2D45; --text: #D8E6F5; --muted: #7A9BBF; --accent: #FF6B35; --white: #FFFFFF; --purple: #967CFF; --poster-w: 594mm; --poster-h: 841mm; --poster-ratio: 594 / 841; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body { background: #04070F; display: grid; place-items: center; font-family: 'Barlow', sans-serif; } .poster { width: min(100vw, calc(100vh * var(--poster-ratio))); height: min(100vh, calc(100vw / var(--poster-ratio))); aspect-ratio: 594 / 841; background: var(--dark); position: relative; overflow: hidden; display: grid; grid-template-rows: 13.2% 1fr 6.2%; } .poster::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(10,132,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,132,255,0.045) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .blob-1 { width: 34%; height: 23%; background: rgba(10,132,255,0.15); top: -5%; right: -4%; } .blob-2 { width: 28%; height: 22%; background: rgba(0,198,184,0.11); bottom: 12%; left: -7%; } .blob-3 { width: 24%; height: 18%; background: rgba(245,197,24,0.08); top: 45%; right: 12%; } .header { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #0A1628 100%); border-bottom: 3px solid var(--gold); padding: 0.85% 1.9%; display: flex; align-items: center; gap: 1.5%; min-height: 0; } .header-logo-block, .header-company { width: 13.2%; display: flex; align-items: center; justify-content: center; min-height: 0; } .uni-logo-box, .company-badge { background: white; border-radius: 10px; padding: 10px 12px; border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; max-width: 150px; } .uni-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(17px, 1.35vw, 24px); color: #1A3A6C; line-height: 1; letter-spacing: 2px; } .uni-sub { font-size: clamp(7px, 0.48vw, 10px); font-weight: 700; color: #C8281E; letter-spacing: 1px; text-transform: uppercase; text-align: center; } .uni-grade { font-size: clamp(6px, 0.42vw, 8px); font-weight: 700; background: #C8281E; color: white; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.8px; text-align: center; } .company-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(20px, 1.6vw, 30px); color: #0A1628; letter-spacing: 3px; } .company-sub { font-size: clamp(7px, 0.48vw, 10px); color: #444; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; text-align: center; } .header-center { flex: 1; text-align: center; min-width: 0; } .poster-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 4.25vw, 84px); letter-spacing: 0.12em; color: var(--white); line-height: 0.95; text-shadow: 0 0 40px rgba(10,132,255,0.45); } .poster-title span { color: var(--gold); } .poster-subtitle { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1.06vw, 20px); color: var(--teal); letter-spacing: 0.17em; text-transform: uppercase; margin-top: 0.3em; line-height: 1.15; } .poster-meta { margin-top: 0.55em; font-size: clamp(8.8px, 0.8vw, 15px); color: var(--text); font-weight: 300; line-height: 1.35; } .poster-meta strong { color: var(--gold); font-weight: 600; } .body { position: relative; z-index: 1; display: grid; grid-template-columns: 24.2% 51.6% 24.2%; min-height: 0; height: 100%; } .col, .col-center { min-height: 0; height: 100%; padding: 1.05% 1.05%; display: grid; grid-auto-rows: 1fr; gap: 0.8%; border-right: 1px solid var(--border); align-content: stretch; } .col:last-child { border-right: none; } .col-center { padding-left: 0.95%; padding-right: 0.95%; } .section, .arch-full { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset; display: flex; flex-direction: column; min-height: 0; } .section-header { padding: 0.5em 0.95em; display: flex; align-items: center; gap: 0.55em; border-bottom: 1px solid var(--border); flex-shrink: 0; } .section-header.gold { background: linear-gradient(90deg, rgba(245,197,24,0.15), transparent); border-left: 3px solid var(--gold); } .section-header.blue { background: linear-gradient(90deg, rgba(10,132,255,0.15), transparent); border-left: 3px solid var(--blue); } .section-header.teal { background: linear-gradient(90deg, rgba(0,198,184,0.15), transparent); border-left: 3px solid var(--teal); } .section-header.orange { background: linear-gradient(90deg, rgba(255,107,53,0.15), transparent); border-left: 3px solid var(--accent); } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 0.96vw, 18px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); line-height: 1.1; } .section-icon { font-size: clamp(13px, 0.88vw, 18px); line-height: 1; } .section-body { padding: 0.78em 0.92em; flex: 1; min-height: 0; } p { font-size: clamp(9.2px, 0.69vw, 12.8px); line-height: 1.44; color: var(--text); font-weight: 300; } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 7px 0; } .hl { color: var(--gold); font-weight: 600; } .hl-teal { color: var(--teal); font-weight: 600; } .hl-blue { color: #5BAEFF; font-weight: 600; } .flow { display: flex; flex-direction: column; gap: 0.34em; align-items: stretch; } .flow-step { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.58em 0.72em; display: flex; align-items: flex-start; gap: 0.65em; } .flow-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 15px; flex-shrink: 0; margin-top: 1px; } .flow-step-num.s1 { background: rgba(10,132,255,0.3); color: var(--blue); border: 1.5px solid var(--blue); } .flow-step-num.s2 { background: rgba(245,197,24,0.3); color: var(--gold); border: 1.5px solid var(--gold); } .flow-step-num.s3 { background: rgba(0,198,184,0.3); color: var(--teal); border: 1.5px solid var(--teal); } .flow-step-num.s4 { background: rgba(255,107,53,0.28); color: var(--accent); border: 1.5px solid var(--accent); } .flow-step-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(10.8px, 0.8vw, 14px); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.9px; line-height: 1.15; } .flow-step-desc { font-size: clamp(8.5px, 0.64vw, 11.4px); color: var(--muted); margin-top: 2px; line-height: 1.35; } .flow-arrow { text-align: center; font-size: 15px; color: var(--muted); line-height: 1; } .tech-tags { display: flex; flex-wrap: wrap; gap: 0.36em; } .tag { font-family: 'JetBrains Mono', monospace; font-size: clamp(7.8px, 0.59vw, 10.6px); padding: 0.38em 0.68em; border-radius: 5px; border: 1px solid; font-weight: 700; letter-spacing: 0.35px; line-height: 1.15; } .tag.blue { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.5); color: #5BAEFF; } .tag.teal { background: rgba(0,198,184,0.12); border-color: rgba(0,198,184,0.5); color: #4DDFD6; } .tag.gold { background: rgba(245,197,24,0.12); border-color: rgba(245,197,24,0.5); color: var(--gold); } .tag.orange{ background: rgba(255,107,53,0.12); border-color: rgba(255,107,53,0.5); color: #FF9070; } .tag.purple{ background: rgba(150,100,255,0.12); border-color: rgba(150,100,255,0.5); color: #C0A8FF; } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.42em; } .feature-pill { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 0.58em 0.7em; display: flex; align-items: flex-start; gap: 0.56em; min-height: 0; } .pill-icon { font-size: clamp(12px, 0.82vw, 15px); flex-shrink: 0; margin-top: 1px; } .pill-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(8.8px, 0.68vw, 11.5px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--teal); display: block; margin-bottom: 2px; line-height: 1.1; } .pill-text { font-size: clamp(8.4px, 0.63vw, 11.1px); line-height: 1.34; color: var(--text); font-weight: 400; } .arch-full .section-header { border-radius: 0; } .arch-body { padding: 0.72em 0.92em 0.82em; display: flex; flex-direction: column; gap: 0.56em; flex: 1; min-height: 0; justify-content: space-between; } .arch-flow-row { display: flex; align-items: stretch; justify-content: center; gap: 0.45em; flex-wrap: nowrap; } .anode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0.74em 0.62em; border-radius: 8px; border: 1.5px solid; min-width: 0; flex: 1; text-align: center; } .anode-icon { font-size: clamp(15px, 1.18vw, 21px); } .anode-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(9.6px, 0.73vw, 12.5px); font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; line-height: 1.1; } .anode-sub { font-size: clamp(6.8px, 0.53vw, 9.6px); opacity: 0.78; line-height: 1.22; } .anode.n1 { background: rgba(245,197,24,0.1); border-color: var(--gold); color: var(--gold); } .anode.n2 { background: rgba(10,132,255,0.1); border-color: var(--blue); color: var(--blue); } .anode.n3 { background: rgba(150,100,255,0.1); border-color: var(--purple); color: #C0A8FF; } .anode.n4 { background: rgba(0,198,184,0.1); border-color: var(--teal); color: var(--teal); } .anode.n5 { background: rgba(255,107,53,0.1); border-color: var(--accent); color: var(--accent); } .flow-connector { align-self: center; font-size: clamp(15px, 1.15vw, 20px); color: var(--muted); font-weight: 900; flex-shrink: 0; } .arch-split-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.62em; } .arch-sub-nodes { display: flex; flex-direction: column; gap: 0.42em; } .anode-sm { padding: 0.56em 0.72em; border-radius: 7px; border: 1.5px solid; display: flex; align-items: center; gap: 0.48em; font-size: clamp(8.1px, 0.63vw, 11.2px); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.18; } .anode-sm.sm-gold { background: rgba(245,197,24,0.08); border-color: rgba(245,197,24,0.4); color: var(--gold); } .anode-sm.sm-blue { background: rgba(10,132,255,0.08); border-color: rgba(10,132,255,0.4); color: #5BAEFF; } .anode-sm.sm-teal { background: rgba(0,198,184,0.08); border-color: rgba(0,198,184,0.4); color: var(--teal); } .anode-sm.sm-purple { background: rgba(150,100,255,0.08); border-color: rgba(150,100,255,0.4); color: #C0A8FF; } .anode-sm.sm-orange { background: rgba(255,107,53,0.08); border-color: rgba(255,107,53,0.4); color: #FF9070; } .split-arrow { font-size: clamp(17px, 1.35vw, 24px); color: var(--muted); font-weight: 900; } .arch-note-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.42em; } .arch-note { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 0.55em 0.68em; font-size: clamp(8.2px, 0.61vw, 10.8px); color: var(--text); line-height: 1.28; } .arch-note strong { color: var(--gold); display: block; margin-bottom: 2px; font-weight: 700; } .tier-block { display: flex; flex-direction: column; gap: 0.42em; } .tier { background: var(--card); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .tier-header { padding: 0.5em 0.82em; display: flex; align-items: center; gap: 0.5em; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(9.5px, 0.76vw, 13px); font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; line-height: 1.15; flex-wrap: wrap; } .tier-header.intro { background: rgba(10,132,255,0.2); color: #5BAEFF; } .tier-header.inter { background: rgba(245,197,24,0.2); color: var(--gold); } .tier-header.adv { background: rgba(255,107,53,0.2); color: var(--accent); } .tier-body { padding: 0.64em 0.84em; font-size: clamp(8.4px, 0.63vw, 11.3px); color: var(--text); line-height: 1.32; } .tier-body em { color: var(--muted); font-style: normal; font-size: clamp(7.1px, 0.53vw, 9.8px); font-family: 'JetBrains Mono', monospace; } .tier-q { display: flex; align-items: flex-start; gap: 0.46em; margin-bottom: 0.33em; } .tier-q:last-child { margin-bottom: 0; } .tier-num { font-family: 'JetBrains Mono', monospace; font-size: clamp(6.8px, 0.5vw, 9.4px); color: var(--muted); margin-top: 2px; flex-shrink: 0; } .compare-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.4em; margin-bottom: 0.38em; } .compare-header span { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(8px, 0.62vw, 11.2px); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; padding: 0.28em 0.62em; border-radius: 4px; text-align: center; } .compare-header .ch-before { background: rgba(255,255,255,0.06); color: var(--muted); } .compare-header .ch-vs { background: var(--gold); color: var(--dark); } .compare-header .ch-after { background: rgba(0,198,184,0.2); color: var(--teal); } .compare-grid { display: flex; flex-direction: column; gap: 0.34em; } .compare-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4em; } .compare-before, .compare-label, .compare-after { border-radius: 6px; padding: 0.46em 0.62em; line-height: 1.16; } .compare-before { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-size: clamp(7.8px, 0.6vw, 10.6px); color: var(--muted); text-align: right; font-weight: 600; } .compare-label { background: var(--card); border: 1px solid var(--border); font-size: clamp(7.8px, 0.6vw, 10.6px); color: var(--text); text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; } .compare-after { background: rgba(0,198,184,0.1); border: 1px solid rgba(0,198,184,0.3); font-size: clamp(8px, 0.61vw, 11px); color: var(--teal); text-align: left; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.38em; } .stat-box { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.58em 0.5em; text-align: center; } .stat-val { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 1.85vw, 34px); line-height: 1; color: var(--teal); } .stat-val.gold { color: var(--gold); } .stat-val.blue { color: var(--blue); } .stat-val.orange { color: var(--accent); } .stat-unit { font-size: clamp(9px, 0.66vw, 13px); color: var(--muted); font-weight: 600; } .stat-label { font-size: clamp(7.2px, 0.54vw, 10.2px); color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; line-height: 1.2; } .perf-table { width: 100%; border-collapse: collapse; font-size: clamp(8px, 0.61vw, 11.2px); margin-top: 0.45em; } .perf-table th { background: var(--card); color: var(--gold); font-family: 'Barlow Condensed', sans-serif; font-size: clamp(7.8px, 0.58vw, 10.8px); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0.48em 0.62em; text-align: left; border-bottom: 1px solid var(--border); } .perf-table td { padding: 0.44em 0.62em; color: var(--text); border-bottom: 1px solid rgba(30,45,69,0.5); vertical-align: middle; line-height: 1.24; } .perf-table tr:last-child td { border-bottom: none; } .perf-val { font-family: 'JetBrains Mono', monospace; font-size: clamp(7.9px, 0.6vw, 11px); font-weight: 700; color: var(--teal); } ul.mars-list { list-style: none; display: flex; flex-direction: column; gap: 0.32em; padding: 0; } ul.mars-list li { display: flex; align-items: flex-start; gap: 0.5em; font-size: clamp(8.3px, 0.63vw, 11.4px); color: var(--text); line-height: 1.34; } ul.mars-list li::before { content: '▸'; color: var(--teal); flex-shrink: 0; font-size: 11px; margin-top: 1px; } .mini-points { display: grid; grid-template-columns: 1fr; gap: 0.3em; margin-top: 0.42em; } .mini-point { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 0.5em 0.62em; font-size: clamp(8px, 0.6vw, 10.8px); color: var(--text); line-height: 1.28; } .mini-point strong { color: var(--gold); } .footer { position: relative; z-index: 1; background: linear-gradient(135deg, #0A1628 0%, #0D1E38 100%); border-top: 2px solid var(--gold); padding: 0.52% 1.9%; display: flex; justify-content: space-between; align-items: center; gap: 1em; min-height: 0; } .footer-left, .footer-center, .footer-right { font-size: clamp(7.5px, 0.58vw, 10.8px); color: var(--muted); line-height: 1.28; } .footer-left strong, .footer-center strong, .footer-right strong { color: var(--text); } .footer-center { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; } .footer-right { text-align: right; } @page { size: A1 portrait; margin: 0; } @media print { html, body { width: var(--poster-w); height: var(--poster-h); margin: 0; padding: 0; overflow: hidden; background: none; } body { display: block; } .poster { width: var(--poster-w); height: var(--poster-h); aspect-ratio: auto; margin: 0; page-break-after: avoid; break-after: avoid; } } </style> </head> <body> <div class="poster"> <div class="blob blob-1"></div> <div class="blob blob-2"></div> <div class="blob blob-3"></div> <div class="header"> <div class="header-logo-block"> <div class="uni-logo-box"> <div class="uni-name">NIRMA</div> <div class="uni-name" style="font-size:clamp(11px,0.9vw,14px);letter-spacing:1px;color:#444;">UNIVERSITY</div> <div class="uni-sub">Institute of Technology</div> <div class="uni-grade">NAAC Accredited 'A' Grade</div> </div> </div> <div class="header-center"> <div class="poster-title"><span>MARS</span> — MAQ Autonomous Recruitment System</div> <div class="poster-subtitle">AI-Powered Interview Assistant · Microsoft Teams Integration · Intelligent Recruitment Workflow</div> <div class="poster-meta"> <strong>Your Name</strong> · Roll No: <strong>XXXXXXXX</strong> · Guided by: <strong>Supervisor Name</strong>, MAQ Software · Department of Computer Science & Engineering · Academic Year <strong>2025–26</strong> </div> </div> <div class="header-company"> <div class="company-badge"> <div class="company-name">MAQ</div> <div class="company-sub">Software</div> <div class="company-sub" style="color:#0A84FF;">Microsoft Gold Partner</div> </div> </div> </div> <div class="body"> <!-- LEFT COLUMN --> <div class="col"> <div class="section"> <div class="section-header gold"> <span class="section-icon">🏢</span> <span class="section-title">Organization Context</span> </div> <div class="section-body"> <p><span class="hl">MAQ Software</span> is a Microsoft-focused engineering and analytics company that develops enterprise-grade cloud, BI, and data solutions for large-scale clients. The work culture emphasizes delivery quality, automation, internal tooling, and deep alignment with the Microsoft ecosystem.</p> <div class="divider"></div> <p>The internship environment relied extensively on <span class="hl-teal">Microsoft Teams</span>, Azure-based services, and structured technical interviews. This created a strong use case for building an AI system that supports interviewers directly inside their day-to-day collaboration workflow.</p> <div class="divider"></div> <p>MARS was therefore designed not only as a prototype, but as a practical productivity layer with strong emphasis on <span class="hl-blue">latency, usability, consistency, and deployability</span> in a real engineering organization.</p> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">📄</span> <span class="section-title">Problem Statement & Objective</span> </div> <div class="section-body"> <p>Traditional technical recruitment requires significant manual effort: interviewers read resumes, infer candidate strengths, prepare question sets across multiple difficulty levels, search for current market-relevant questions, and improvise follow-up prompts during live discussions. This process is slow and often inconsistent.</p> <div class="divider"></div> <p>The goal of <span class="hl">MARS</span> is to unify these fragmented activities into one intelligent assistant capable of:</p> <ul class="mars-list" style="margin-top:7px;"> <li>semantic resume indexing and rapid candidate retrieval,</li> <li>automatic generation of structured technical interview questions,</li> <li>augmentation with public market interview questions,</li> <li>live transcription and contextual follow-up prompting,</li> <li>all while staying natively integrated within Microsoft Teams.</li> </ul> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">⚙️</span> <span class="section-title">Methodology</span> </div> <div class="section-body"> <div class="flow"> <div class="flow-step"> <div class="flow-step-num s1">1</div> <div> <div class="flow-step-title">Resume Collection & Parsing</div> <div class="flow-step-desc">PDF, DOCX, and TXT resumes are collected from Azure Blob Storage and normalized into clean text.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s2">2</div> <div> <div class="flow-step-title">Embedding & Vector Indexing</div> <div class="flow-step-desc">Resume chunks are embedded using Azure OpenAI embeddings and stored in FAISS for fast similarity search.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s3">3</div> <div> <div class="flow-step-title">Tiered Question Generation</div> <div class="flow-step-desc">GPT-4o generates role-aware questions across three difficulty bands using candidate signals and project evidence.</div> </div> </div> <div class="flow-arrow">↓</div> <div class="flow-step"> <div class="flow-step-num s4">4</div> <div> <div class="flow-step-title">Live Interview Assistance</div> <div class="flow-step-desc">During the interview, speech is transcribed and converted into real-time private prompts for the interviewer.</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🛠️</span> <span class="section-title">Technology Stack</span> </div> <div class="section-body"> <div class="tech-tags"> <span class="tag blue">Python 3.11</span> <span class="tag blue">Azure OpenAI</span> <span class="tag blue">GPT-4o</span> <span class="tag blue">Embedding API</span> <span class="tag teal">FAISS</span> <span class="tag teal">Azure Speech</span> <span class="tag teal">Whisper</span> <span class="tag gold">Microsoft Teams</span> <span class="tag gold">Microsoft Graph API</span> <span class="tag gold">Bot Framework SDK</span> <span class="tag orange">aiohttp</span> <span class="tag orange">asyncio</span> <span class="tag orange">WebSockets</span> <span class="tag purple">Azure Blob Storage</span> <span class="tag purple">PyPDF2</span> <span class="tag purple">python-docx</span> <span class="tag purple">SeleniumBase</span> </div> </div> </div> </div> <!-- CENTER COLUMN --> <div class="col-center"> <div class="arch-full"> <div class="section-header blue"> <span class="section-icon">🏗️</span> <span class="section-title">System Architecture</span> </div> <div class="arch-body"> <div class="arch-flow-row"> <div class="anode n1"> <span class="anode-icon">👤</span> <span class="anode-label">Interviewer</span> <span class="anode-sub">Initiates query in Teams</span> </div> <div class="flow-connector">→</div> <div class="anode n2"> <span class="anode-icon">💬</span> <span class="anode-label">Teams Bot</span> <span class="anode-sub">Receives role & candidate request</span> </div> <div class="flow-connector">→</div> <div class="anode n3"> <span class="anode-icon">🗄️</span> <span class="anode-label">FAISS Index</span> <span class="anode-sub">Retrieves candidate context</span> </div> <div class="flow-connector">→</div> <div class="anode n5"> <span class="anode-icon">🤖</span> <span class="anode-label">GPT-4o</span> <span class="anode-sub">Generates questions & prompts</span> </div> </div> <div class="arch-split-row"> <div class="arch-sub-nodes"> <div class="anode-sm sm-blue">📞 MS Graph Calling API · Join active interview call</div> <div class="anode-sm sm-teal">🎙️ Audio frames → PCM stream → low-latency speech pipeline</div> <div class="anode-sm sm-purple">📂 Resume chunks + skills + role metadata + historical context</div> </div> <div class="split-arrow">→</div> <div class="arch-sub-nodes"> <div class="anode-sm sm-gold">⚡ Azure Speech Services · rapid transcription for active conversation</div> <div class="anode-sm sm-orange">🧠 GPT follow-up prompt generation from evolving answers</div> <div class="anode-sm sm-purple">💬 Private Teams chat assistance delivered only to interviewer</div> </div> </div> <div class="arch-note-grid"> <div class="arch-note"> <strong>Retrieval Layer</strong> Vector search helps identify candidate skills, tools, projects, and role alignment far more reliably than keyword-only matching. </div> <div class="arch-note"> <strong>Generation Layer</strong> AI combines retrieved profile context with role expectations to produce more relevant and progressively difficult questions. </div> <div class="arch-note"> <strong>Live Layer</strong> Transcribed responses are continuously analyzed to suggest clarifications, deeper probes, and follow-up discussion paths. </div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">❓</span> <span class="section-title">Tiered Question Generation</span> </div> <div class="section-body"> <div class="tier-block"> <div class="tier"> <div class="tier-header intro"> 🌱 Introductory <em>foundational understanding · conceptual clarity · screening readiness</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Explain the difference between <span class="hl-blue">var</span>, <span class="hl-blue">let</span>, and <span class="hl-blue">const</span>.</div> <div class="tier-q"><span class="tier-num">Q2</span> What is the role of the <span class="hl-blue">GIL</span> in Python and when does it affect concurrency?</div> <div class="tier-q"><span class="tier-num">Q3</span> What problem do React hooks solve in functional components?</div> <div class="tier-q"><span class="tier-num">Q4</span> Differentiate inner join, left join, and full join with practical scenarios.</div> <div class="tier-q"><span class="tier-num">Q5</span> What are REST APIs and what makes an endpoint idempotent?</div> </div> </div> <div class="tier"> <div class="tier-header inter"> 🔧 Intermediate <em>implementation detail · debugging ability · practical engineering judgment</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Describe a backend service you built and how you handled scaling bottlenecks.</div> <div class="tier-q"><span class="tier-num">Q2</span> Explain a difficult production bug and the process you used to isolate the root cause.</div> <div class="tier-q"><span class="tier-num">Q3</span> How did you implement authentication and authorization in your system?</div> <div class="tier-q"><span class="tier-num">Q4</span> How would you improve a slow API with database-heavy endpoints?</div> <div class="tier-q"><span class="tier-num">Q5</span> What trade-offs did you face while setting up CI/CD for reliability and deployment speed?</div> </div> </div> <div class="tier"> <div class="tier-header adv"> 🚀 Advanced <em>architecture · systems thinking · trade-offs under scale and reliability constraints</em> </div> <div class="tier-body"> <div class="tier-q"><span class="tier-num">Q1</span> Design a <span class="hl" style="color:var(--accent)">globally distributed real-time system</span> with low-latency reads and resilient writes.</div> <div class="tier-q"><span class="tier-num">Q2</span> Compare <span class="hl" style="color:var(--accent)">monolith vs microservices</span> across cost, observability, and operational complexity.</div> <div class="tier-q"><span class="tier-num">Q3</span> How would you optimize a datastore serving <span class="hl" style="color:var(--accent)">100M+ records</span> with mixed query workloads?</div> <div class="tier-q"><span class="tier-num">Q4</span> What architecture would you choose for fault-tolerant asynchronous processing and why?</div> <div class="tier-q"><span class="tier-num">Q5</span> How do you balance consistency, availability, and throughput in multi-region systems?</div> </div> </div> </div> </div> </div> <div class="section"> <div class="section-header teal"> <span class="section-icon">✨</span> <span class="section-title">Key Features</span> </div> <div class="section-body"> <div class="feature-grid"> <div class="feature-pill"> <span class="pill-icon">🔍</span> <div class="pill-text"> <span class="pill-label">Semantic Retrieval</span> Candidate skills, project evidence, and tool exposure are retrieved by meaning rather than keyword coincidence. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎯</span> <div class="pill-text"> <span class="pill-label">3-Tier Evaluation</span> Introductory, intermediate, and advanced question bands improve balance across screening and deep technical rounds. </div> </div> <div class="feature-pill"> <span class="pill-icon">🌐</span> <div class="pill-text"> <span class="pill-label">Market Question Mining</span> Web-sourced question patterns supplement AI-generated content to reflect broader industry interview expectations. </div> </div> <div class="feature-pill"> <span class="pill-icon">🎙️</span> <div class="pill-text"> <span class="pill-label">Live Transcription</span> Continuous speech-to-text enables real-time answer analysis without forcing the interviewer to take manual notes. </div> </div> <div class="feature-pill"> <span class="pill-icon">💬</span> <div class="pill-text"> <span class="pill-label">Private Guidance</span> Suggestions are delivered privately to the interviewer so the candidate experience remains natural and uninterrupted. </div> </div> <div class="feature-pill"> <span class="pill-icon">⚡</span> <div class="pill-text"> <span class="pill-label">Async Pipeline</span> Retrieval, generation, scraping, and response preparation run concurrently to reduce end-to-end interaction delay. </div> </div> <div class="feature-pill"> <span class="pill-icon">🧩</span> <div class="pill-text"> <span class="pill-label">Teams-Native Flow</span> The full assistant experience stays inside Microsoft Teams, minimizing context switching and tool fragmentation. </div> </div> <div class="feature-pill"> <span class="pill-icon">📈</span> <div class="pill-text"> <span class="pill-label">Extensible Platform</span> The architecture supports ATS integration, scorecards, summary generation, multilingual support, and future analytics. </div> </div> </div> </div> </div> </div> <!-- RIGHT COLUMN --> <div class="col"> <div class="section"> <div class="section-header teal"> <span class="section-icon">📊</span> <span class="section-title">Results — Efficiency Gains</span> </div> <div class="section-body"> <div class="compare-header"> <span class="ch-before">Manual</span> <span class="ch-vs">VS</span> <span class="ch-after">MARS</span> </div> <div class="compare-grid"> <div class="compare-row"> <div class="compare-before">30–45 min</div> <div class="compare-label">Question Prep</div> <div class="compare-after">~60 s</div> </div> <div class="compare-row"> <div class="compare-before">Manual scan</div> <div class="compare-label">Resume Search</div> <div class="compare-after">< 1 ms</div> </div> <div class="compare-row"> <div class="compare-before">15–25 Q's</div> <div class="compare-label">Question Volume</div> <div class="compare-after">65–120 Q's</div> </div> <div class="compare-row"> <div class="compare-before">No support</div> <div class="compare-label">Live Suggestions</div> <div class="compare-after">200–400 ms</div> </div> <div class="compare-row"> <div class="compare-before">Manual notes</div> <div class="compare-label">Transcription</div> <div class="compare-after">Auto · 93%+</div> </div> <div class="compare-row"> <div class="compare-before">Variable</div> <div class="compare-label">Coverage</div> <div class="compare-after">3-tier structured</div> </div> <div class="compare-row"> <div class="compare-before">Ad hoc</div> <div class="compare-label">Consistency</div> <div class="compare-after">Repeatable flow</div> </div> </div> <div class="mini-points"> <div class="mini-point"><strong>Observed impact:</strong> interviewers spend less time preparing and more time assessing communication, clarity, and depth of understanding.</div> <div class="mini-point"><strong>Operational benefit:</strong> structured assistance reduces inconsistency across interviewers with different levels of domain familiarity.</div> </div> </div> </div> <div class="section"> <div class="section-header gold"> <span class="section-icon">⚡</span> <span class="section-title">Performance Metrics</span> </div> <div class="section-body"> <div class="stat-grid"> <div class="stat-box"> <div class="stat-val gold">~60<span class="stat-unit">s</span></div> <div class="stat-label">First End-to-End Query</div> </div> <div class="stat-box"> <div class="stat-val"><1<span class="stat-unit">ms</span></div> <div class="stat-label">FAISS Retrieval Lookup</div> </div> <div class="stat-box"> <div class="stat-val blue">200<span class="stat-unit">ms</span></div> <div class="stat-label">Speech Response Latency</div> </div> <div class="stat-box"> <div class="stat-val orange">120</div> <div class="stat-label">Max Questions / Candidate</div> </div> </div> <table class="perf-table"> <tr><th>Operation</th><th>Time</th></tr> <tr><td>Resume parsing + chunking</td><td><span class="perf-val">~5–10 s</span></td></tr> <tr><td>Indexing one resume</td><td><span class="perf-val">~10 s</span></td></tr> <tr><td>Semantic candidate search</td><td><span class="perf-val">~0.5 s</span></td></tr> <tr><td>AI question generation</td><td><span class="perf-val">~20–30 s</span></td></tr> <tr><td>Market question scraping</td><td><span class="perf-val">~30–60 s</span></td></tr> <tr><td>Live follow-up delivery</td><td><span class="perf-val">200–400 ms</span></td></tr> </table> </div> </div> <div class="section"> <div class="section-header blue"> <span class="section-icon">💡</span> <span class="section-title">Discussion & Challenges</span> </div> <div class="section-body"> <p>MARS shows that an interview-support system can be embedded directly inside the Microsoft collaboration stack while preserving natural interviewer workflow. The assistant is most useful not as a replacement for judgment, but as a <span class="hl">context-aware augmentation layer</span> that improves consistency, recall, and response speed.</p> <div class="divider"></div> <p>Important engineering constraints shaped the final solution. The <span class="hl-teal">Graph Calling API</span> required public HTTPS deployment for bot accessibility. Whisper provided strong transcription quality but higher latency, which made <span class="hl-blue">Azure Speech</span> more suitable for real-time assistance. Resume retrieval also benefited from fuzzy matching fallback to tolerate spelling and formatting variation.</p> <div class="divider"></div> <p>User acceptance feedback indicated that structured question tiers, live prompting, and seamless Teams integration were the most valuable parts of the system. The strongest practical benefit was maintaining interview flow while still receiving private guidance in real time.</p> </div> </div> <div class="section"> <div class="section-header orange"> <span class="section-icon">🎯</span> <span class="section-title">Conclusion & Future Work</span> </div> <div class="section-body"> <ul class="mars-list"> <li>MARS integrates resume intelligence, question generation, and live interview support into one unified workflow.</li> <li>The project demonstrates applied use of Azure OpenAI, speech services, vector search, asynchronous Python services, and Teams automation.</li> <li>Tiered question generation improves repeatability, fairness, and interview depth across candidates.</li> <li>Real-time assistance reduces interviewer preparation burden while strengthening technical probing quality.</li> <li><strong style="color:var(--gold);">Future scope:</strong> ATS integration, scoring with explainability, multilingual interviewing, response caching, summary reports, and post-interview analytics dashboards.</li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer-left"> <strong>Your Name</strong> · Roll No: XXXXXXXX · Dept. of Computer Science & Engineering<br> Nirma University, Ahmedabad · Academic Year 2025–26 </div> <div class="footer-center"> <strong>MARS — MAQ Autonomous Recruitment System</strong><br> Internship Project · Intelligent AI Recruitment Assistant </div> <div class="footer-right"> Guided by: <strong>Supervisor Name</strong><br> MAQ Software · Microsoft Gold Partner </div> </div> </div> </body> </html>
This version is better for “fully occupied A1” because:
- the poster height is split explicitly into header, body, and footer
- each column uses equal-height stacked sections
- the center architecture section is expanded
- content density is increased without changing the theme
- spacing is tightened so the layout fills the canvas more evenly
If you want, I can next make it even more polished with:
- icon circles and connecting lines in the architecture
- a proper performance bar chart section
- your real name, roll number, and guide name inserted directly