ScholarLens Frontend

Frontend web application for ScholarLens, a paper reading assistant service

Overview

• Provides UI for paper upload/analysis/viewing based on Next.js (App Router)
• Visualizes summary/Q&A/translation/highlight results by integrating with ScholarLens backend API

Tech Stack

Category	Technology
Framework	Next.js (App Router)
Language	TypeScript
Styling	Tailwind CSS
UI Components	shadcn/ui
Deployment	Docker, Docker Compose

---

Key Features

1. Document Upload and Viewer

• Drag & Drop Upload: Easy PDF file upload
• PDF Viewer: Renders uploaded papers page by page
• Interactive UI: Section-wise summaries, translation, and highlight display

2. AI-Powered Analysis

• Summary: Section-wise key content summarization
• Q&A: Context-based conversational questions and answers
• Translation: Korean translation of selected sections or text
• Highlights: Automatic extraction and display of important sentences

---

Quick Start

Requirements

• Node.js 18+
• npm or pnpm
• Backend server running (http://localhost:8000)

How to Run

🐳 Option 1: Docker Compose (Recommended)

# Clone repository
git clone https://github.com/ScholarLensAI/scholarlensAI-FE.git
cd scholarlensAI-FE

# Run with Docker Compose
docker compose up --build

# Run in background
docker compose up -d

# Stop
docker compose down

💻 Option 2: Local Development Mode

# Clone repository
git clone https://github.com/ScholarLensAI/scholarlensAI-FE.git
cd scholarlensAI-FE

# Install dependencies
npm install

# Run development server
npm run dev

# To run on a different port
npm run dev -- -p 3001

Access After Running

• Frontend: http://localhost:3000
• Backend: http://localhost:8000 (needs to be run separately)

---

Environment Setup

By default, it uses the configuration values in lib/config.ts (http://localhost:8000) and can run without additional setup.

To change the backend URL, create a .env.local file:

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
BACKEND_API_URL=http://localhost:8000

Environment Variable	Default	Description
NEXT_PUBLIC_BACKEND_URL	http://localhost:8000	Backend address to be called from client
BACKEND_API_URL	http://localhost:8000	Backend address to be called from server side
BACKEND_INTERNAL_URL	BACKEND_API_URL	Backend address for Docker internal network

---

Project Structure

scholarlensAI-FE/
├── app/                          # Next.js App Router
│   ├── api/                      # Proxy/Backend integration API Routes
│   │   ├── chat/route.ts         # Q&A requests
│   │   ├── highlights/route.ts   # Highlight queries
│   │   ├── translate/route.ts    # Translation requests
│   │   └── upload/route.ts       # File upload requests
│   ├── reader/page.tsx           # Document upload page
│   ├── viewer/                   # Viewer page
│   │   ├── loading.tsx           # Loading UI
│   │   └── page.tsx
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Main page
│
├── components/                   # React components
│   ├── pdf/pdf-viewer.tsx        # pdf-viewer component
│   ├── ui/                       # UI components (shadcn/ui)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   ├── tabs.tsx
│   │   └── textarea.tsx
│   └── theme-provider.tsx        # Theme provider
│
├── lib/                          # Utility functions
│   ├── config.ts                 # Common utilities
│   └── utils.ts                  # Common utilities
│
├── public/                       # Static files
├── styles/                       # Global styles
├── .eslintrc.js
├── .gitignore
├── .dockerignore
├── docker-compose.yml            # Docker execution settings
├── Dockerfile
├── components.json               # shadcn/ui configuration
├── next.config.mjs               # Next.js configuration
├── package-lock.json
├── package.json
├── postcss.config.mjs            # PostCSS configuration
├── README.md
└── tsconfig.json                 # TypeScript configuration

---

🖥️ Page Structure

Main Page (/)

• Project introduction and key features overview
• Entry point to upload page

Upload Page (/reader)

• PDF file upload UI (Drag & Drop support)
• Automatically navigates to viewer page upon successful upload

Viewer Page (/viewer)

• PDF rendering and navigation
• Tab interface:
  • Summary: View section-wise summaries
  • Q&A: Understand papers through AI conversation
  • Translation: Translate selected text
  • Highlights: Sentence highlights

Troubleshooting

When Environment Variables Are Not Recognized

• Verify that .env.local file is in the project root
• Check for NEXT_PUBLIC_ prefix
• Restart development server

Port Conflict

npm run dev -- -p 3001

Dependency Errors

rm -rf node_modules package-lock.json
npm install

Build Errors

rm -rf .next
npm run build

Docker-Related Issues

docker compose down
docker system prune -a
docker compose up --build

Backend Connection Failure

• Verify that backend server (http://localhost:8000) is running
• Check backend URL in .env.local
• Verify network/firewall settings