Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

Работа добавлена:



Если Вы нашли нужный Вам реферат или просто понравилась коллекция рефератов напишите о Нас в любой соц сети с помощью кнопок ниже





Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке на http://mirrorref.ru

Оглавление

  • Введение
  • Глава 1. Платформа GATE для обработки естественного языка
  • Лингвистический процессор GATE
  • Язык для описания лексико-семантических шаблонов JAPE
  • Критерии обзора существующих решений
  • Редактор создания структур баз данных «WWW SQL Designer»
  • Веб-редактор для создания UML диаграмм «CodeUML»
  • Онлайн редакторы «Pencilcode» и «Scratch» для визуальных языков
  • Настольные редакторы для языка JAPE
  • Сводная таблица сравнения аналогов
  • Выбор инструмента для визуализации диаграмм
  • Выбор платформы для разработки
  • Глава 2. Проектирование визуальных конструкций на основе языка JAPE и выявление требований к веб-редактору для них
  • Проектирование визуальных конструкций
  • Разработка визуального представления
  • Выявление требований для веб-редактора
  • Архитектура веб-приложения
  • Проектирование веб-редактора
  • Проектирование интерпретатора
  • Глава 3. Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке
  • Реализация клиентской части приложения
  • Реализация графического представления объектов
  • Реализация алгоритма соединения объектов линией
  • Реализация основных функций веб-редактора
  • Выводы по результатам реализации редактора
  • Заключение
  • Список сокращений и условных обозначений
  • Библиографический список
  • Приложение А. Грамматика языка JAPE
  • Приложение Б. Диаграмма классов клиента
  • Приложение В. Функции соединения и перемещения объектов
  • Приложение Г. Функции соединения и перемещения объектов

Введение

Объем неупорядоченной и неструктурированной текстовой информации неуклонно растет, поэтому задача ее быстрой и качественной обработки актуальна сегодня во многих областях науки, включая лингвистику. Для такого анализа необходимы средства автоматизации, а именно средства извлечения информации из текстов. Этой задачей занимается компьютерная лингвистика. С ее помощью решается широкий спектр задач. Одно из традиционных направлений лингвистики, корпусная лингвистика, с появлением компьютерных технологий получила мощную технологическую поддержку.

Для лингвистов этот раздел языкознания интересен тем, что, с помощью корпусов они могут обрабатывать огромные массивы текстов, которые вручную обработать было бы невозможно, и решать задачи статистического исследования языка. Прикладные же лингвистические технологии используются повсеместно, где необходимо извлечь полезную информацию из большого объема информации на одном из естественных языков (системы поиска, распознавание речи, автоматический перевод и т.д.). Для того чтобы начать анализировать текст, необходимо задать правила (шаблонные конструкции), по которым он будет аннотирован. Лексико-семантические шаблоны объединяют отдельные лексические элементы слов на группы по их значению.

Для обработки текстов существуют специализированные программные средства и библиотеки, такие как: «АОТ»[1], WordSmith Tools[2], AntConc[3] иGATE [4]. Последняя система решает практически любые задачи анализа текста. С помощью JAPE [5] она обрабатывает текст на основе регулярных выражений и позволяет разрабатывать лексико-семантические шаблоны, по которым ведется поиск. Однако большая часть пользователей - это лингвисты, и разработка подобных шаблонов вызывает у них затруднения из-за сложности языка. Решением может являться создание визуального языка, который станет проще для пользователей, в этом и заключается актуальность работы.

Объектом исследования являются предметно-ориентированные языки, в то время как предметом – методы визуализации языков и работы с ними. Таким образом, целью исследования является разработать визуальный предметно-ориентированный язык описания лексико-семантических шаблонов на основе JAPE, а также веб-редактор для него.

Для достижения цели исследования были выделены следующие задачи:

  1. Провести обзор платформыGATE и ее инструмента для аннотирования текста.
  2. Провести системный анализ существующих редакторов для визуальных языков и языкаJAPE, рассмотреть их возможности, преимущества и недостатки.
  3. Рассмотреть инструменты, с помощью которых возможно реализовать веб-редактор и описать графические конструкции языка.
  4. Провести анализ языка JAPE, а именно, рассмотреть синтаксис языка, его возможности и принципы работы, с целью разработать визуальное представление его конструкций и определить правила трансформации текстового представления в графическое.
  5. Сформулировать и описать функциональные требования к веб-редактору.
  6. Создать исследовательский прототип веб-редактора для визуального языка, разработанного на основеJAPE, который позволит создавать, редактировать диаграммы и сохранять их на локальном компьютере.

На данный момент, разработчиками рекомендуется создавать лексико-семантические шаблоны на языке JAPE с помощью продвинутого текстового редактораVim или среды разработки Eclipse. Однако ни один из этих редакторов не ориентирован на пользователей, которые ранее не встречались с программированием и только хотят начать свою работу с платформойGATE.

Для рассмотрения существующих редакторов использовались такие методы морфологического анализа. При проектировании веб-редактора для визуальногоDSL языка, разработанного на основеJAPE, использовалось, прежде всего, предметно-ориентированное моделирование информации, которую необходимо записать в терминахDSL, методы объектно-ориентированного проектирования (UML). Для разработки технологии объектно-ориентированного и веб-программирования.

В результате выполненной работы должен быть создан визуальный предметно-ориентированный язык на основе грамматических конструкцийJAPE, а также веб-редактор с открытым исходным кодом для него. Разработанный редактор позволит русскоязычному пользователю, ранее не встречавшемуся с программированием создать шаблоны и правила для поиска в тексте полезной информации и сбора статистических данных о языке, который в нем использован.

Достоверность полученных результатов подтверждается успешным интегрированием редактора с системой для анализа текстов и ее внедрением.

В работе содержится введение, три главы, заключение, библиографический список и приложения. В первой главе представлено описание платформыGATE и языкаJAPE, приведено сравнение существующих аналогов разрабатываемому веб-редактору и решений для редактирования шаблонов на языкеJAPE. Вторая глава описывает разработку визуальных конструкций языка JAPE и выявление требований для веб-редактора. Третья глава посвящена разработке веб-редактора по описанным ране требованиям. В заключении описаны достигнутые результаты и ограничения исследования, а также, возможности для дальнейшей разработки.

Результаты исследования будут использованы русскоязычными авторами для определения их уровня академического английского при необходимости написания статей в международные сборники на английском языке.

Глава 1. Платформа GATE для обработки естественного языка

  1. Лингвистический процессор GATE

GATE представляет собой инфраструктуру для разработки и развертывания компонентов программного обеспечения, которые обрабатывают естественный язык. Это свободно-распространяемое программное обеспечение с открытым исходным кодом. Он позволяет анализировать тексты любых размеров, решая такие функции обработки, как: синтаксический, морфологический, лексический анализ, тегирование (индексация) данных, информационный поиск и многие другие.

Среди преимущество данной платформы перед другими разработчики выделяют:

  1. Комплексность.GATE включает в себя все необходимые инструменты для анализа текстов.
  2. Масштабируемость достигается путем множества возможностей и плагинов, которые предлагает данная система.
  3. Открытость, расширяемость и возможность многократного использования. Благодаря стандартам, описанным на базе опыта работы с пользователями системы и открытому (хорошо документированному) исходному коду, систему очень просто переиспользовать. Разработчикам представляется расширяемоеAPI и веб-службы для дальнейшего использования.
  4. Прозрачность. Благодаря раздельным компонентам системы и дополнительным плагинам, пользователю понятнее алгоритм анализа, т.к. он видит, что нужно подавать на вход каждому из компонент и что получается на выходе.
  5. Надежность. Система проходит контроль качества путем применения количественной оценки показателей, что гарантирует предсказуемое поведение.
  6. Устойчивый коэффициент полезного действия.

На рисунке 1.1 представлены компоненты системыGATE, позволяющие анализировать текст на естественном языке. В данной работе нас будет интересовать самый нижний компонент,JAPETransducer. Это первоначальный уровень, соединяющий анализирующие компоненты непосредственно с текстом, а значит, самый первый этап, который позволяет пользователю вести обработку. Для снижения входного барьера, необходимо сделать этот шаг наиболее простым и интуитивно-понятным.

Рисунок 1.1. Компоненты платформы для анализа текстаGATE

  1. Язык для описания лексико-семантических шаблонов JAPE

JAPE позволяет анализировать текст на основе регулярных выражений. Грамматика этого языка состоит из фаз, которые сдержат в себе набор шаблонов и/или правил. Правило всегда состоит из левой и правой частей. Левая часть содержит идентификатор, позволяющий определить шаблон, а правая – действия, которые необходимо выполнить для обнаружения этого шаблона.

Например, на рисунке 1.2 представлен пример шаблона, определяющего спортивные категории.

Рисунок 1.2. Лексико-семантический шаблон для определения категорий спорта,

описанный на языкеJAPE

Первой строкой описывается название фазы, оно должно быть уникальным. «Input» определяет, на какого типа аннотации будет направлено описываемое правило. По умолчанию устанавливается «Token» (буква), «Lookup» (область текста) или «SpaceToken» (лексема пробела). «Options» определяет, метод соответствия правилу с помощью элемента «control». Так же в этой строке может быть указан способ запуска: в режиме отладки или нет (по умолчанию стоит «debug =false», что значит, что запуск правила производится не в режиме отладчика). Далее, в четвертой строке определено название правила, а в пятой – приоритет его выполнения. Последовательность выполнения правил определяется проставленными приоритетами.

После идентифицирующих строк, описывается сам шаблон: седьмая и восьмая строки описывают правило «найти все аннотации, соответствующие шаблонуLookup.majortype == “Sports” и присвой им имяlabel. Символ «-->» является границей, после которой описывается правая часть правила. Строка 10 посылает команду дляJAPETransducer о переименованииlabel (определенной на строке 8) в «Sport». А правило, по которому она была определена, именуется «SportsCategory».

Это лишь небольшой и самый простой пример, который может быть использован для анализа текста, однакоJAPE предоставляет более широкие возможности, такие как, идентификация фраз (части текста, а не только одного слова), слов в контексте (разных форм слова) и другие. Таким образом, необходимо найти более понятную для неподготовленного пользователя форму представления шаблонов, которая бы позволила снизить порог вхождения, для более быстрого начала работы с многофункциональной платформойGATE.

  1. Критерии обзора существующих решений

В главе рассмотрены существующие решения веб-редакторов, позволяющих создавать разного типа диаграммы и генерировать на их основе программный код. Так же рассмотрены рекомендованные разработчиками [5] редакторы для языка JAPE. Главная цель создания веб-редактора для описания лексико-семантических шаблонов – максимально упростить работу пользователей с языком JAPE посредством визуального представления зыка, кроме того, необходимо, чтобы он работал непосредственно в браузере, без установки дополнительного программного обеспечения. Поэтому критериями сравнения существующих решений были выделены:

  1. Для решения каких задач были созданы рассматриваемые веб-редакторы. Под данным пунктом необходимо рассмотреть, как создатели позиционируют свой продукт, для каких языков и целей.
  2. Доступность. Необходимо выяснить, насколько пользователю просто начать работу с редактором, и какие функции доступны без приобретения лицензии, в каких браузерах гарантирована корректная работа.
  3. Форматы поддерживаемых файлов. В каких форматах можно будет сохранять полученный результат, и где будут храниться эти файлы.
  4. Возможность генерации фрагментов кода с помощью предоставленных шаблонов. Будет выяснено, есть ли в реакторе возможность вставки уже готовых шаблонов для дальнейшего их редактирования пользователем, т.к. данная возможность значительно ускорит работу.
  5. Возможность создания диаграмм, на основе которых будет сгенерирован программный код. Будет выяснено, возможно, ли, изменяя визуальное представление (диаграмму), генерировать программный код, а не наоборот.
  6. Реализация функции выявления ошибок в коде. Необходимо рассмотреть, как разработчики реализуют обработку ошибок в получившемся у пользователя коде.
  1. Редактор создания структур баз данных «WWW SQL Designer»

«WWW SQL Designer» позиционируется как абсолютно бесплатный, доступный для пользователей,универсальный веб-редактор, значительно упрощающий процесс создания структуры хранилищ и баз данных для более известных и популярных СУБД [6]. Упрощение работы достигается путем автоматического генерирования скриптов на основе построеннойER-диаграммы. Однако для создания массивных хранилищ такой редактор не подойдет, ввиду того, что создавать их в визуальном представлении гораздо проблематичнее, чем описать скриптами или создать с помощью СУБД.

Для работы с «WWW SQL Designer» пользователю необходимо лишь открыть его в браузере(разработчики гарантируют правильную работу наMozilla Firefox,IE,Safari иOpera, работа основных функций была проверена наGoogle Chrome).Для корректной работы не нужно устанавливать никаких дополнительных библиотек или расширений для браузера, достаточно только включить разрешение на выполнениеJavaScript команд. Генерация кода реализована под наиболее популярные СУБД:MSSQL,MySQL,SQLite,Oracle,PostgresSQL и другие. Все эти функции делают данный редактор универсальным и общедоступным. Более того, в нем реализованы все необходимые для построения структур баз данных функции: создание уникальных полей (ключей), внешних ключей, добавление комментариев, типизирование полей и т.д.

Для последующего использования разработанной схемы, пользователь может сохранить ее в своем браузере, на предоставленном сервере под ключевым словом, в видеxml файла или экспортировать в видеSQL скрипта.SQL скрипт генерируется прямо в окне браузера, так что его можно скопировать и сохранить в любой удобный формат. Импорт схем так же возможен изXML файла или сохраненной ранее схемы (доступ открыт ко всем ранее сохраненным на сервере базам).

По сути, вся работа веб-редактора строится на генерации кода, на основе уже готовых шаблонов, которые пользователь только добавляет на диаграмму. Ему вообще не нужно работать с кодом на протяжении всего процесса создания диаграммы, только получив в результате скрипт, применить его в нужной СУБД. Такая изоляция гарантирует правильность конечного результата, т.к. весь код находится под управлением программы. Так же она будет наиболее удобна для пользователей, ранее не работавших со скриптами. Возможности же обратной генерации –ER-диаграммы на основе введенного скрипта – нет. Импорт возможен только из сохраненного ранее файла в формате .xml.

  1. Веб-редактор для создания UML диаграмм «CodeUML»

Проект CodeUML.com является частью проекта PlantUML, созданного одноименной командой разработчиков. Это проект с открытым исходным кодом, который позволяет быстро создавать различные UML диаграммы в браузере, не устанавливая дополнительного программного обеспечения [7]. Точных данных, на каких браузерах проект будет работать, не найдено, но проверено, что основные функции он выполняет на таких браузерах, как IE, Google Chrome, Mozilla Firefox и Safari. Распространяется он бесплатно, можно лишь по желанию пользователя поддержать проект.

Разработчики позиционируют редактор как доступный любому, значительно ускоряющий процесс создания UML диаграмм инструмент. Однако для его использования необходимо изучить язык PlantUML, с помощью которого и достигается увеличение эффективности работы. Таким образом, можно предположить, что этот инструмент наоборот, создавался для программистов, которым легче описать диаграмму в текстовом виде, чем в визуальном, т.к. девиз проекта звучит как «design UML diagrams as fast as you can code», что значит «создавай UML диаграммы так быстро, насколько ты можешь запрограммировать».

Сохранение диаграммы происходит как обычное сохранение картинки из браузера (в формате .png), а кода – копированием текста. Таким образом, сохранить текст можно в любом удобном для пользователя формате. Функции экспорта и импорта не поддерживаются, можно лишь создать новую диаграмму.

Слева для пользователя предоставлен набор шаблонов, значительно упрощающих работу с языком PlantUML. Значит, даже неподготовленные пользователи смогут работать с веб-редактором и избежать некоторых ошибок. Конечным результатом работы считается диаграмма, а не программный код, поэтому, ее редактирование невозможно. Из-за непосредственного доступа пользователя к коду на PlantUML, разработчиками был реализован компилятор, сразу выдающий ошибку вместо диаграммы.

  1. Онлайн редакторы «Pencilcode» и «Scratch» для визуальных языков

Веб-редакторы «Pencilcode.net» [8] и «Scratch» [9] позиционируются как обучающие или редакторы для начинающих программировать. Их целесообразно рассмотреть в данном исследовании для выявления методов упрощения понимания пользователем языка программирования. «Pencilcode» был создан командой «PencilCode», он визуализирует язык Coffeescript, но так же поможет изучить Javascript, HTML, и CSS. Так же для обучения языку издано множество книг и учебников.Scratch создан «Lifelong Kindergarten Group», визуализирует одноименный язык, который тоже содержит переменные, ветвления, циклы и др. С помощью этого языка можно создавать  интерактивные истории, игры и анимации. Оба редактора направлены на максимальное упрощение обучения программированию.

Оба редактора работают в онлайн режиме и для их использования не нужно устанавливать дополнительного программного обеспечения. Для того чтобы воспользоваться функциями сохранения и загрузки файлов в «Pencilcode» необходимо зарегистрироваться, однако не нужно вводить никаких персональных данных, только псевдоним и пароль. Все файлы хранятся на сервере разработчиков, их нельзя скачать на локальный компьютер. Из «Scratch» разработанные программы можно сохранить на компьютер в виде файлов в формате .sb2. Так же их можно загрузить и дорабатывать. Так как оба редактора ориентированы на конкретные языки, и для обучения, показывать исходный код нет необходимости, пользователь видит только свою программу на визуальном языке, и сохраняет и загружает файлы с ней.

Редакторы не содержат готовых шаблонов, но в руководствах пользователя описано много примеров, так же при открытии редактора в первый раз, сразу генерируется программа – пример, что упрощает работу пользователя и первое знакомство с этими редакторами. Справа описаны подсказки и шаги создания и запуска программы, что так же помогает пользователю в быстром освоении основ работы с языком программирования.

  1. Настольные редакторы для языка JAPE

Ввиду того, что для языка JAPE не предусмотрен специализированный редактор, разработчики рекомендуют использовать Vim [10] или Eclipse [11], ассоциировав файлы с расширением .jape с одной из этих программ. Vim – это продвинутый текстовый редактор, подобный Notepad++, Sublime и другим, который позволяет лишь подсветить ключевые слова и помочь в организации скобок. Eclipse так же не предназначен для JAPE, хотя поддерживает множество языков. Как и Vim, эта среда может быть использована как текстовый редактор.

Оба этих редактора – настольные приложения, поэтому их требуется скачать и установить. Скачать их можно бесплатно с официальных сайтов. Они не могут предоставить визуализацию языка JAPE, редактировать его можно только в текстовом формате. Ввиду того, что Eclipse преимущественно используется как IDE для Java, имеет довольно богатый функционал, совершенно бесполезный для файлов с JAPE. В таком случае, лучше установить Vim, т.к. он изначально создавался как универсальный редактор для множества языков.

Оба этих редактора позволяют сохранять и загружать файлы с расширением .jape, при дополнительной настройке, что опять же, будет проблематично для пользователя, не встречавшегося с программированием.

Весь код на JAPE пользователю придется вводить вручную, поэтому предварительно ему будет необходимо изучить текстовый язык. Как было сказано выше, визуализации языка не поддерживается, поэтому и функции генерации кода на основе разработанной диаграммы нет. Более того, приведенные редакторы помогут исправить лишь немногие ошибки, связанные с неправильным расположением скобок или использованием имен или ключевых слов. Поэтому вся ответственность за обработку ошибок ложиться на пользователя, что снова влечет за собой длительную предварительную подготовку к работе с языком JAPE и платформой GATE.

  1. Сводная таблица сравнения аналогов

В ходе исследования, было рассмотрено шесть редакторов. Два из них – веб-редакторы, позволяющие разрабатывать диаграммы и генерировать на их основе программный код и наоборот. Еще два – редакторы, рекомендованные разработчиками для редактирования лексико-семантических шаблонов на языкеJAPE. Последние не предоставляют возможности визуализации языка, поэтому требуют длительной подготовки пользователя для работы. «WWWSQLDesigner» позволяет полностью сгенерировать готовый программный код на основе составленной пользователем диаграммы, а «CodeUML» наоборот, на основе текстового языкаPlantUML генерируетUML диаграммы различного типа. «Pencilcode» и «Scratch» вообще не дают доступа пользователя к коду, что исключает возможность появления ошибок и весь процесс создания программы контролируется, а диаграммы сохраняются в виде файлов с уникальным расширением специально для этих редакторов. Прежде чем был проведен обзор, были выделены критерии сравнения аналогов, приведенные в пункте 1.1. Результаты сравнения приведены в таблице 1.1.

Насколько можно увидеть из результатов сравнения, на данный момент, редакторы, в которых можно редактировать кодJAPE могут предоставить лишь небольшое количество необходимых функций, и вся ответственность за контролированием ошибок лежит на пользователе. Более того, для начала работы с ними нужно установить всё необходимое программное обеспечение и изучить языкJAPE, что займет длительное время для неподготовленных пользователей, ранее не встречавшихся с языками программирования или регулярными выражениями.

Рассмотренные веб-редакторы, не предназначенные для языков для описания лексико-семантических шаблонов, выявило ряд полезных функций, которые помогли бы упростить изучение языкаJAPE и ускорить знакомство и начало работы с ним, а также, дальнейшее использование. Так, была выявлена особенность веб-редакторов «WWWSQLDesigner», «Pencilcode» и «Scratch», что полностью исключает появление ошибок в коде, который будет получен в результате, за счет полной изоляции пользователя от него. В веб-редакторе «CodeUML» выявлена функция использования уже готовых шаблонов – блоков, вставив которые, пользователь уже может использовать полученный код или дорабатывать его. Эта функция опять же, ускорит работу и поможет избежать ошибок, которые может сделать пользователь.

Таким образом, был составлен морфологический ящик, из которого выделились наиболее подходящие параметры для разрабатываемого веб-редактора. Но, как видно из таблицы, ни один из вариантов в строке «целевые языки» не удовлетворяет главному требованию создаваемого веб-редактора: направленность на языкJAPE.

Таблица 1.1. Сравнение аналогов и существующих редакторов дляJAPE

WWW SQL Designer

CodeUML

Vim/Eclipse

Pencilcode

Scratch

Целевые языки

SQLскрипты

PlantUML

Java

Coffescript, Javascript, HTML, CSS

Scratch

Доступность

Бесплатно, доступ из браузера без дополнительных надстроек

Бесплатно, доступ из браузера без дополнительных надстроек

Бесплатно, необходимо скачать установочный файл

Бесплатно, доступ из браузера без дополнительных надстроек, нужна регистрация.

Бесплатно, доступ из браузера без дополнительных надстроек

Обработка ошибок

Веб-редактор исключает появление ошибок за счет того, что код полностью генерируется программой.

С помощью встроенного компилятора вместо диаграммы отображается ошибка.

Может отследить только ошибки связанные с неправильными расположением скобок, использованием имен и ключевых слов.

Выявление ошибок при запуске программы в виде сообщения

Исключено появление ошибок

Функция визуализации программного кода

-

+

-

+

+

Функция конвертирования визуального отображения в текстовое

+

-

-

-

-

Наличие готовых шаблонов

+

+

-

-, но есть подсказки и примеры

-, но есть подсказки и примеры

Поддерживаемые форматы файлов

Скрипт отображается в окне браузера, сохранить его можно в любой формат. Загрузка файлов может производиться из браузера, с сервера или .xml файла.

Сохранение диаграммы - сохранение картинки из браузера (.png). Загрузка кода - копирование и вставка текста в окно браузера.

Можно ассоциировать файлы.jape.

-

.sb2

Функции импорта/экспорта кода

-/+

+/+

+/+

-/-

-/-

Таким образом, было решено создать веб-редактор, который бы не требовал установки дополнительного программного обеспечения для корректной работы, т.к. это наиболее простой вариант начала использования редактора пользователем. Редактор будет обеспечен справочной системой, однако она будет реализована на последующих итерациях разработки. Главная задача – визуализация языка, поэтому веб-редактор будет обладать функцией генерации программного кода на основе диаграммы, но не наоборот. Это оградит пользователя от возможных ошибок в коде. Результатом работы программы будет текстовый файл в формате .jape, в котором будет описан код наJAPE, сгенерированный по разработанной пользователем диаграмме. В дальнейшем этот файл будет храниться в облачном хранилище. Чтобы диаграммы можно было переиспользовать, необходимо реализовать функции сохранения и импорта. Для разработки веб-редактора для языкаJAPE была выбрана платформаJava, т.к. на данный момент это наиболее широко используемая платформа для разработки веб-приложений [12], к тому же, позволяет создавать проекты с открытым исходным кодом.

  1. Выбор инструмента для визуализации диаграмм

Для визуализации диаграмм потребуется инструмент, который позволил бы создавать растровые или векторные изображения на веб-странице. ГрафическийAPIWebGL не рассматривался, т.к. он используется для решения более сложных задач, в основном, для создания интерактивной 3D-графики.  Выбор производился из двух наиболее популярных на данный момент вариантов:Canvas[13] илиSVG[14]. В таблице 1.2. представлено сравнение этих двух инструментов.

Canvas – это элементHTML5, он предназначен для создания растровых изображений при помощи языкаJavaScript. Имеет возможность добавления на холст видео, однако для создания диаграмм этой функции не потребуется. Для рисования можно использовать два разных подхода: 2D или 3D (WebGL). Все картинки, реализованные с помощьюcanvas, состоят из пикселей, это означат, что разработчику не нужно концентрироваться на ограничениях сложности изображения, однако у этой характеристики есть и отрицательная сторона. Не существует каких-либо файловых форматов, рисование возможно только с помощью скриптов.

SVG же имеет векторный графический формат, это язык разметки, основанный наXML. Это значит, что мы сможем сохранить созданные диаграммы в формальном виде и затем, сгенерировать на их основе код наJAPE. Он поддерживает и декларативную и скриптовую графику. Однако, не имеет функции 3D отрисовки. Однако, этой функции и не требуется для рисования диаграммы Вирта.

Предполагается, что по завершении работы будет создан веб-редактор, который позволит пользователю создавать диаграммы, которые, в последствии, можно будет трансформировать в код на языкеJAPE. Это значит, что необходимо использоватьSVG, т.к.Canvas не может быть сохранен в форматеXML, т.к. предназначен для других целей. Так же,Canvas не подходит для динамических проектов, поэтому было решено использоватьSVG.

Таблица 1.2. Сравнение инструментов для рисования на веб-странице

Canvas

SVG

Высокая и стабильная производительность благодаря тому, что изображение разбито на пиксели. Производительность падает при увеличении разрешения.

Не зависит от разрешения изображения, подходит для кроссплатформенных веб-проектов.

Полученное изображение можно сохранить в форматах .JPG или .PNG.

Изображение можно сохранить в формальном виде, т.к.SVG – язык разметки, основанный наXML.

Лучше всего подходит для создания растровой графики, где манипуляции важны на уровне пикселей.

Позволяет получить полный контроль над каждым объектом (элементом).

НетAPIдля анимации.

Поддерживает анимацию.

Не подходит для создания интерактивных сайтов. При перерисовывании одного объекта перерисовывается всё полотно.

Элементы могут быть динамическими с помощьюJavaScript или описательного синтаксиса. При изменении положения элемента меняются только его координаты, полотно перерисовывать не нужно.

Объекты нельзя связать с обработчиками событий, т.к. они являются частью полотна.

Каждый графический объект - часть модели DOM.

  1. Выбор платформы для разработки

Ввиду того, что в качестве инструмента для описания графики был выбранSVG, клиентская часть приложения будет разрабатываться наJavaScript. Существует множество библиотек, которые позволяют упростить работу сSVG [15], среди них была выбранаRaphael.js [16], т.к. это наиболее широко используемая библиотека с открытым исходным кодом, которую можно свободно использовать в соответствии с лицензией Apache2, и пользоваться исходным кодом с GitHub. Так же, ее отличительной особенностью является то, что она направлена на будущие разработки, поддерживает новейшие функцииSVG (такие как управление группами объектов, что важно для данной разработки). Соответственно, для описания стилей будет использован языкCSS.

Реализация серверной части приложения будет производиться на языкеJava, т.к. на сегодняшний момент этот язык наиболее популярен, а значит, востребован [17]. Так же преимуществами этой платформы является свободно-распространяемое программное обеспечение для разработки (среда разработкиEclipse, серверTomcat) и открытый исходный код, что позволит переиспользовать уже разработанные модули для нового проекта.

Глава 2. Проектирование визуальных конструкций на основе языкаJAPE и выявление требований к веб-редактору для них

  1. Проектирование визуальных конструкций

Вторая глава описывает процесс трансформации текстового языкаJAPE в визуальный язык, который позволит описывать лексико-семантические шаблоны в форме диаграмм Вирта. Данная форма представления наиболее очевидна для понимания, а это значит, что она поможет снизить порог вхождения пользователям, которые захотят начать свою работу с платформойGATE. Прежде всего, будет проведен более подробный обзор грамматики языкаJAPE, рассмотрены трансформации конструкций. После чего, будут разработаны требования для редактора.

В приложении А представлена вся грамматика языкаJAPE в форме БНФ. В виду своей сложности, на первом этапе разработки будет выполнена визуализация не всех его конструкций, а только наиболее используемых новичками. Все шаблоны, создаваемые с помощью языкаJAPE можно представить в форме диаграмм Вирта, т.к. они направлены на извлечение слов из текста.

  1. Разработка визуального представления

Как было описано выше, на первом этапе разработки, будут описаны только самые часто-используемые конструкции языкаJAPE. Таким образом,  в соответствии с грамматикой языка (см. приложение А), левая часть правила может быть описана как «PatternElement». Этот элемент и является шаблоном для извлечения информации из текста. Это может быть как обычный идентификатор, так и «BasicPatternElement» или «ComplexPatternElement». Диаграмма Вирта для «BasicPatternElement» (объединенная с «Constraint») описана на рисунке 2.1:

Рисунок 2.1. Диаграмма Вирта для описания конструкции «BasicPatternElement», объединенная с «Constraint»

«AttrVal» в этой диаграмме – значение атрибута, которое может быть конечного числа типов: «<string> | <ident> | <integer> | <floatingPoint> | <bool>». Таким образом, идентификатор и значение атрибута можно преобразовать в атрибут и его значение для объекта, идетификатор которого пишется перед точкой. Например, Token.kind == "number" будет преобразован в объект с идентификаторомToken, у которого будет атрибут (свойство) «kind» со значением «number». При чем, тип значения будет «ident», т.к. в случае этого примера, шаблон извлекает из текста числа. На рисунке 2.2 с помощьюUML нотации описан классToken с его атрибутами, его визуальное представление и описание на языкеXML (с опущением некоторых атрибутов, таких как координаты фигуры и его размеры).

Рисунок 2.2. Объект «Token», его визуальное представление и писание в форматеXML

Таким образом, с помощью визуального представления объекта, можно упростить изображение правила. Чаще всего, начинающим пользователям необходимо извлекать слова или фразы из текста, поэтому,  схема описания этого шаблона будет гораздо более читаемой для них, чем текстовое представление языка. А создание такого объекта будет сопровождаться подсказками и описанием что необходимо описать для извлечения необходимых словосочетаний.

Одна визуальная диаграмма будет представлять собой одну фазу («Phase»). С одним правилом («Rule»). Такое решение было принято в связи с тем, что данный вид шаблонов наиболее читаем для начинающих пользователей, а значит, понятен, и, позволит максимально упростить процесс их создания. Таким образом, фаза («Phase»), описанная в виде диаграммы Вирта на рисунке 2.3. Будет преобразована в объект, который и будет представлять собой поле для создания диаграммы. Так как было решено использоватьSVG для генерации графики, «полотном» для создания всех объектов будет тэг «<svg>», он и будет представлять собой описание фазы и правила в ней. Таким образом, описание фазы с рисунка 2.4 на языкеXML будет выглядеть следующим образом (атрибуты тэга, необходимые для визуализации опущены): «<svgphase = “firstpassrule = “TwoPatternspriority = “20” />». Атрибуты описывающие «Input» и «Options» будут опущены, т.к. было решено оставить их по умолчанию, т.к. для начинающих пользователей эти атрибуты вызывают непонимание. В последующих итерациях разработки они могут быть лего добавлены.

Рисунок 2.3. Описание фазы языкаJAPE в виде диаграммы Вирта

Рисунок 2.4. Шаблон, описанный на языкеJAPE,

аннотирующий названия и имена людей

Правая часть шаблона описывает действие именования выделенных ранее меток «person» и «title» в «Person» и «Title» соответственно посредством правила «TwoPatterns». Данное действие описано в грамматике языка в форме БНФ как «AssignmentExpression», однако, помимо него в правой части может стоять либо блок кода на языкеJava (именованный или нет) либо идентификатор. На диаграмме визуального языка, основанного наJAPE, для описания этой части правила будет использован «вход» и «выход» для описываемой диаграммы. Объект «вход» будет иметь атрибут «label», куда будет записываться название метки («title» или «person» из примера на рисунке 2.4). Объект «выхода» будет иметь атрибут «ident» для описания наименования определенных ранее меток. Если пользователю будет необходимо добавить блок с кодом наJava, он сможет это сделать добавив объект на диаграмму.

Таким образом, на рисунке 2.5 представлен пример с рисунка 2.4, описанный на визуальном языке. Оба прямоугольника – объекты типа «Lookup», ведущие поиск по документу в поисках уже аннотированного текста, где свойство «majorType» эквивалентно значению в прямоугольнике. Кроме того, сам объектsvg имеет атрибуты, описанные выше. Их пользователь вводит при создании диаграммы.

Рисунок 2.5. Шаблон на визуальном языке, аннотирующий названия и имена людей

Некоторые правила могут содержать отрицание, как описано в БНФ, представленной в приложении А. Поэтому, было решено ввести понятие «негативного выхода», т.е. чтобы пользователь мог определить нежелательный шаблон. Таким образом, на рисунках 2.6 и 2.7 можно увидеть как шаблон для аннотирования названий, не начинающихся наS (илиs) будет выглядеть на языкеJAPE и визуальном языке соответственно. Сначала будут найдены все совпадения «Lookup.majortype == “Title”», а после этого, выявлены те, что начинаются наS будут исключены.

Рисунок 2.6. Шаблон на языкеJAPE, аннотирующий названия, не начинающиеся наS илиs

Конструкция «MacroDef»  будет преобразована в объект-ссылку на другую диаграмму. Таким образом, были трансформированы все конструкции языкаJAPE, которые могут быть использованы начинающими пользователями.

Рисунок 2.7. Шаблона на визуальном языке, аннотирующий названия,

не начинающиеся наS илиs

  1. Выявление требований для веб-редактора

Веб-редактор для описания лексико-семантических шаблонов должен предоставлять возможность описания шаблонов на визуальном языке, с последующим сохранением и использованием этих шаблонов. Таким образом, на вход могут подаваться пустые файлы или уже созданные ранее диаграммы, а на выходе должны получаться готовые диаграммы (см. рисунок 2.8).

Рисунок 2.8.IDEF0 для модуля веб-редактора для описания лексико-семантических шаблонов на визуальном языке

В качестве управления будут выступать правила, описывающие грамматику языкаJAPE, т.к. в итоге, полученные диаграммы  должны быть использованы для анализа текстов с помощью платформыGATE, которая использует этот язык для описания шаблонов. Вторым условием правильного функционирования блока будет поддержка интерфейсов веб-службы, которая будет исполнять роль хранилища всех данных (диаграмм). Таким образом, необходимо использовать эти интерфейсы для корректного сохранения лексико-семантических шаблонов в хранилище, для последующего их использования в системеSFTA, которая, на базе платформыGATE будет анализировать большие количества неструктурированной текстовой информации.

  1. Архитектура веб-приложения

На рисунке 2.9 изображена архитектура будущего веб-приложения.

Рисунок 2.9. Архитектура веб-редактора для описания лексико-семантических шаблонов

Все операции по рисованию диаграммы будут выполняться на клиентской части приложения посредством обработчиков событий наJavaScript. Это позволит ускорить работу по созданию диаграмм. Сервер будет выполнять операции по сохранению/загрузке диаграмм в/из облачного хранилища соответственно. Для добавлен этих функций будет реализованWebServiceclient, который позволит осуществить связь сWCF сервисом. Для того, чтобы созданные диаграммы можно было использовать при анализе текстов, их необходимо преобразовать в языкJAPE. Эту функцию будет выполнять интерпретатор, который будет осуществлять трансформацию визуального языка вJAPE, и обратно. Таким образом, все диаграммы будут храниться в облачном хранилище в виде .jape файлов, чтобы их можно было без проблем использовать в других модулях системыSFTA.

  1. Проектирование веб-редактора

Для реализации веб-редактора визуального языка описания лексико-семантических шаблонов была выбрана платформаJava (web-application), для генерации графики инструментSVG и библиотекаRaphael.js, которая позволит оперировать визуальными объектами. На рисунке 2.10 представлена диаграмма прецедентов, описывающая сценарии, по которым пользователь будет обращаться к разрабатываемому продукту:

Рисунок 2.10. Диаграмма прецедентов для веб-редактора описания лексико-семантических шаблонов на визуальном языке

Сохранение диаграммы будет производиться в форматXML или файлы с расширением .jape, где лексико-семантический шаблон будет храниться в виде языкаXML или языкаJAPE соответственно. Однако, такое сохранение будет доступно лишь на локальный компьютер пользователя. Все файлы, которые будут сохранены в облачном хранилище, будут храниться в виде шаблонов на языкеJAPE, для того, чтобы их можно было использовать для анализа текста в системеSFTA.

Таким образом, выделение классов в данном проекте было проведено по функциональности, которую они должны обеспечить. Так, классRedactor должен предоставлять функции создания, сохранения и редактирования диаграмм, а так же их импорт. Однако, для сохранения их в облачном хранилище необходимы еще два класса –Parser иCloudConnector. Первый предоставит возможность генерации когда наJAPE изXML вида и обратно, а второй обеспечит связь с веб-сервисом, предоставляющим доступ к облачному хранилищу.

Для реализации генерации диаграммы, так же необходимо построить диаграмму классов. Для того, чтобы редактор был расширяем, и в него можно было добавить большее количество объектов, необходимо создать универсальный объект, от которого будут унаследованы все остальные. Конструкцииязыка «Lookup»и «Token»имеютобщиесвойства: objectType, propertyName, propertyValue, operation.Эти свойства необходимы для описания шаблонов. Однако, таким образом, можно строить любые объекты, присваивая им различный внешний вид. Таким образом, будет создан абстрактный объект – «AbstracrShapeObject».

На первой стадии разработки будет реализована функциональность клиента, т.е. не будет реализовано общение с сервером для того, чтобы сгенерировать код наJAPE, на основе визуальной диаграммы и сохранение файлов в облачном хранилище. Работа клиента заключается в создании новой диаграммы, ее редактирование и сохранение на локальном компьютере. Диаграмма классов для клиентской части представлена в приложении Б. Все функции по отрисовке объектов и генерации на их основеXML кода будут возложены на клиента, т.к. это значительно уменьшит время редактирования диаграммы и позволит пользователю работать с редактором даже при отключении сервера, т.к. диаграмму можно будет сохранить на локальном компьютере в видеXML файла.

Для того чтобы с редактором было удобно работать начинающим пользователям, необходимо разработать дизайн, наиболее привычный для большинства людей. Так, на рисунке 2.12 представлена общая концепция дизайна веб-редактора. Верхнее меню предоставляет функции создания новой диаграммы, сохранение и импорт существующей.

Слева представлена панель, на которой находятся объекты для создания диаграммы лексико-семантического шаблона. Два элемента, которые используются как «Input» в шаблонах наJAPE по умолчанию: «Token» и «Lookup». Так же добавление начала правила (вход), его конца (выход) и негативного выхода, необходимость которого была описана выше. Далее представлена кнопка создания объекта с кодом на языкеJava, объекты «string» и «ident», необходимые для описания некоторых вариаций шаблонов. Справа представлен лист, на котором будет генерироваться изображение диаграммы.

Рисунок 2.12. Общая концепция дизайна веб-редактора

  1. Проектирование интерпретатора

Для того, чтобы интерпретироватьXML представление в языкJAPE, был использован язык преобразованияXSLT [18]. Данный язык и будет служить транслятором, с его помощью исходный код диаграммы возможно модифицировать по усмотрению разработчика. Как было показано на рисунке 2.9, синтаксический анализ исходной страницыXML будет проводиться на стороне сервера.

Для того, чтобы преобразование было возможным на стороне сервера, необходимо использовать XSLT API, TransformerFactory. МетодnewTransformer(stylesource) позволяет создать трансформер, на основе переданного набора шаблонов на языкеXSLT. Далее, для запуска трансформации, необходимо запустить методtransform(source,result), в который передается файл для трансформации и переменная, в которую необходимо поместить результат преобразования [19].

Так, на сервер будет отправлен файл в формате .txt, далее он будет преобразован в формат .jape и сохранен в облачное хранилище. Для преобразованияXML представления необходимо опустить все атрибуты стиля, такие как: цвет границы, тип и размер шрифта; опустить позиционирующие объект атрибуты (координаты и трансформации над фигурой). В связи с тем, что все необходимые атрибуты для описания лексико-семантического шаблона на языкеJAPE находятся именно в фигурах (обозначаемых тегами <rect> и <ellipse>), было решено пропускать теги <text> в виду их не информативности, т.к. они предназначены лишь для работы с пользователем. Все фигуры, связанные линиями (элементы с тэгом <path>) последовательно, будут преобразованы в правила, объединенные логическим «И». Если будут найдены линии, у которых второй объект (obj2) будет совпадать, это означает, что  два этих правила будут объединены логическим «ИЛИ». Одна диаграмма (начинающаяся с элемента «Start» и заканчивающаяся «Finish»), будет объединена в фигурные скобки и выделена как отдельное правилоJAPE.

С помощьюXSLT были разработаны средства для извлечения нужных атрибутов для формирования правил на языкеjape. Например, ниже представлен отрывок из .xml документа, в котором описан «Lookup» со всеми необходимыми для отображения этого объекта на диаграмме атрибутами:

<div id="svgout" priority="5" phase="ExtractTitle" rule="ExtractWithoutSs" onclick="getEventElement()"> <svg height="760" version="1.1" width="1000">

<rect x="204" y="76" width="37.25" height="40" rx="10" ry="10" fill="#0000ff" stroke="#0000ff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 0; cursor: move;" stroke-width="2" fill-opacity="0" indexInArray="8" ident="id_1464204248325" objectType="Lookup" propertyName="majorType" propertyValue="Title" operation="==" propertyType="String"></rect>

</svg> </div>

В .xsl файл, для извлечения только нужных элементов и атрибутов, необходимо поместить следующие шаблоны:

<xsl:stylesheet …>

<xsl:template match="div">

 Phase: <xsl:value-of select="@phase"/>

 Rule: <xsl:value-of select="@rule"/>

 Priority: <xsl:value-of select="@priority"/>

 <xsl:apply-templates/>

</xsl:template>

<xsl:template match="svg">

   (<xsl:apply-templates select="rect"/>  )

</xsl:template>

<xsl:template match="rect">

 <xsl:if test="@objectType= 'Lookup'">{

 <xsl:value-of select="@objectType"/>.

<xsl:value-of select="@propertyName"/>

<xsl:value-of select="@operation"/>

<xsl:value-of select="@propertyValue"/>}

 </xsl:if>

</xsl:template>

</xsl:stylesheet>

Первый шаблон обращен к корневому элементу (<div>), из которого можно извлечь необходимые для описания лексико-семантического шаблона на языкеJAPE атрибуты: название фазы, название правила и приоритет правила. После этого к элементу применяется («xsl:apply-templates») следующий шаблон -templatematch="svg". При помощи него мы опускаемся на ступень ниже по иерархии тегов в <svg> элемент.

Под тэгом <svg> и будут находиться все объекты диаграммы, например <rect>. Однако, в связи с тем, что все типы объектов («Lookup», «Token») представлены одинаковым тегом, необходимо различать их по атрибуту «objectType». Для этого добавлен оператор сравнения «if», который проверяет атрибут на эквивалентность со строкой «Lookup». В результате трансформации представленного отрывка .xml файла при помощи шаблонов из .xsl, будет получен следующий результат:

Phase: ExtractTitle Rule: ExtractWithoutSs Priority: 5

({Lookup.majorType==Title})

Данная строка уже практически соответствует готовому шаблону на языкеJAPE, не хватает лишь правой части правила. Как было описано выше, элементы правой части будут извлекаться из объектов диаграммы начала и конца.

Наибольшую трудность в разработке шаблонов для модификации .xml файла составляют линии, соединяющие различные объекты, т.к. необходимо записывать правила в соответствии с положением визуального объекта на линии.

Глава 3. Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

  1. Реализация клиентской части приложения

На языкеJavaScript, в соответствии с диаграммой классов, представленной в приложении Б, были разработаны объекты клиентской части приложения. В ходе разработки, возникла необходимость в создании класса «WebForm», который содержит обработчики событий для кнопок и объектов веб-редактора. Так же необходим метод «init», который, при запуске веб-формы связывает компоненты с их обработчиками событий. Так, всем кнопкам были назначены функции обработки события «onClick», а так же инициализирован обработчик события выделения графического объекта на диаграмме.

  1. Реализация графического представления объектов

Библиотека для генерации векторных изображенийRaphael.js предоставляет возможности по рисованию таких объектов как прямоугольник, эллипс, текст или линию. Однако, для создания объектов в соответствии с рисунком 2.7 необходимо соединить два объекта – прямоугольник и текст. Для этого используется «set», он объединяет объекты в массив, при этом, вXML представлении, они объединяются в тэг <g> или <group>. Даже после такого объединения фигуры будут вести себя как два отдельных объекта, поэтому было необходимо разработать алгоритм по их совместному передвижению при перетаскивании по холсту при нажатой кнопке мыши.

Функция «drag()» – предоставляет стандартный алгоритм для перемещения объектов, однако она может быть измененная по усмотрению разработчика, путем переопределения трех функций: начало передвижения, передвижение и окончание передвижения. Названия у них могут быть различными, главное, что их необходимо передать как параметры в функцию «drag» в правильном порядке. Прежде всего, для того, чтобы у объектов текста и прямоугольника была ссылка друг на друга, при создании объекта, определим для них атрибуты «pair»: прямоугольник имеет значением атрибута текст, а текст – прямоугольник. Таким образом, два объекта будут связаны друг с другом.

Для того, чтобы пользователю было видно, что фигура выделена и ее можно перетаскивать по холсту, выделим ее с помощью затемнения. Это действие производится в функции «preMoving», которая определяет действия, выполняемые над объектом при начале движения. После этого, необходимо вычислить начальные координаты фигуры. Ввиду того, что объектом может быть не только прямоугольник, но и эллипс, необходимо сделать проверку на тип фигуры, т.к. координаты разного типа фигур задаются по-разному. Вне зависимости от того, на какую из фигур попал пользователь (текст или прямоугольник), благодаря ассоциативной связке посредством атрибута «pair» возможно вычислить координаты парного элемента. На этом задачи функции заканчиваются. Функция «move» определяет порядок движения для пары фигур. Фактически, она меняет координатыx иy от ранее определенных в первой функции, в зависимости от передвижения. Функция «postMoving» убирает выделение объекта (затемнение), которое было сделано на первом шаге. Разработанные функции передвижения будут актуальны для всех подобных типов фигур – пар объектов фигура-текст, даже если текст не будет помещен внутри.

Для определения уникального внешнего вида объектов был создан классDesign, определяющий их внешний вид. При создании нового объекта необходимо указать его цвет, цвет и размер текста в нем и вид курсора мыши при наведении на объект. Таким образом было выделено два объекта – «Lookup» и «Token». Их графическое представление проиллюстрировано на рисунке 3.1:

Рисунок 3.1. Графическое представление объектов «Token» и «Lookup»

Для отображения начала и окончания диаграммы было решено сделать отличающиеся фигуры – эллипсы. При чем, Начало будет обозначено синим цветом, а выходы – зеленым и красным в соответствии с тем, желательный этот выход или нет (см. пункт 2.2). Графическое представление этих объектов представлено на рисунке 3.2:

Рисунок 3.2. Графическое представление начала и окончания выражения правила шаблона

  1. Реализация алгоритма соединения объектов линией

Для того, чтобы строить диаграммы в соответствии с рисунком 2.7, необходимо реализовать алгоритм соединения двух объектов линией. Для отображения линии наsvg холсте, необходимо задать две точки – первая и вторая фигура. Для этого на этапе проектирования у объекта «Path» было определено два атрибута «obj1» и «obj2». Прорисовать линию между ними не составляет сложности, однако, обе этих фигуры динамические, а это значит, что при перемещении одной из них вторая координата (вторая точка) будет изменяться вместе с координатами фигуры. В связи с этим, прорисовку линии необходимо обновлять в функции «move», определенной в пункте 3.2.

Для того чтобы линии корректно отображались, необходимо выбрать две наиболее удачные точки на поверхности первого и второго объекта. Для этого была реализована функция «connection». На вход ей передается два объекта. Прежде всего, определяются координаты этих объектов. После этого, на поверхности каждого определяются четыре точки – середины сторон объекта. После этого вычисляется наименьшее расстояние между одной из точек первого объекта и второго и только после этого прорисовывается линия. Реализацию (программный код) данной функции и окончательный вариант трех функций для перемещения представлен в приложении В.

  1. Реализация основных функций веб-редактора

Функция создания новой диаграммы осуществляется при нажатии на кнопку «Новая диаграмма» в левом верхнем углу экрана. Открывается модульное окно, где пользователю необходимо ввести обязательные для описания лексико-семантического шаблона параметры: название фазы, название правила и приоритет правила. При нажатии на кнопку «создать» генерируется пустой лист, куда пользователь сможет создавать новые объекты. На рисунке 3.4 показано модальное окно создания новой диаграммы.

Рисунок 3.4. Создание новой диаграммы в веб-приложении

При создании объектов на диаграмме, если они имеют параметры, задаваемые пользователем, используется подобный подход: в модульное окно пользователь вводит необходимые данные для создания объекта, после чего объект появляется на холсте диаграммы. Если какие-либо из обязательных данных не были введены, объект не будет создан и пользователем будет получено предупреждение о необходимости заполнения полей ввода.

Сохранение диаграммы будет производиться двумя способами: локально, на компьютер пользователя, что позволит работать с редактором автономно при сбоях на сервере, и в облачное хранилище. Для обеспечения автономности работы, файл будет сохранен в формате .xml. Однако для того, чтобы разработанные диаграммы могли быть использованы при дальнейшей работе пользователя с системойSFTA, которая позволит с помощью лексико-семантического шаблона провести анализ текста, они должны быть сохранены в формате .jape. Поэтому, все файлы, попадающие в облачное хранилище, будут проходить преобразование изXML представления в языкJAPE. Данная особенность так же позволит сделать модуль веб-редактора для описания лексико-семантических шаблонов автономным от общей системы, а значит, при необходимости внесения в него изменений, изменения в общей системе будут минимальны или их не будет вообще. Для реализации функции сохранения файлов на локальный компьютер пользователя была использована библиотекаRaphael.js, которая позволяет преобразовать <svg> холст в строку форматаxml.

В связи с тем, что функция сохранения реализована для двух форматов файлов, импорт диаграмм будет производиться по той же схеме. Если диаграмма будет импортироваться с локального компьютера, то практически сразу будет отображена на холсте. Если же будет проводиться импорт лексико-семантического шаблона из облачного хранилища, необходимо выполнить преобразование языкаJAPE в .xml формат и только после этого, отобразить полученную диаграмму на холсте.

На рисунке 2.6 представлен пример лексико-семантического шаблона, который аннотирует все заголовки, не начинающиеся с буквыS илиs меткой «TitleWithoutS» (взят из руководства пользователя с официального сайта платформыGATE). На рисунке 3.3 проиллюстрировано графическое представление данного шаблона. Диаграмма выполнена в разработанном редакторе. В результате сохранения диаграммы будет получен файл, который представлен в приложении Г.

Рисунок 3.3. Лексико-семантический шаблон, разработанный с помощью веб-редактора

  1. Выводы по результатам реализации редактора

В ходе исследования был разработан веб-редактор для визуального языка в соответствии с требованиями, выделенными в главе 2, по результатам опроса конечных пользователей и обзору существующих решений. В соответствии с визуальными представлениями, спроектированными под пунктом 2.2., используя инструмент генерации графикиSVG и библиотекуRaphaelJS, были разработаны графические объекты диаграммы, основанные на конструкциях языкаJAPE.

После этого, был реализован алгоритм связывания объектов посредством объекта «path», который предполагает, что у каждой фигуры есть четыре координаты для возможного размещения линии. После подсчета дистанций между наиболее вероятными из них для связывания, выбирается наименьшее расстояние между двумя координатами от разных фигур, где и прорисовывается линия. Данный алгоритм позволяет располагать линии относительно графических объектов наиболее удачно для отображения. Для полного функционирования редактора, были реализованы его основные функции: создание новой диаграммы, сохранение ее на локальном компьютере и импорт диаграммы с локального компьютера в формате .xml.

Заключение

В ходе работы были достигнуты следующие результаты:

  1. Проведен обзор платформыGATE и языка для описания лексико-семантических шаблоновJAPE. Выявлена грамматика языка, изучены принципы составления шаблонов. В соответствии с грамматикой спроектированы визуальные представления конструкций языкаJAPE. На первом этапе, были выбраны наиболее часто используемые элементы грамматики.
  2. Рассмотрены существующие доступные средства для описания шаблонов на языкеJAPEEclipse» и «Vim»). Однако ни один из этих редакторов не ориентирован на языкJAPE. Рассмотрены веб-редакторы для создания диаграмм, предоставляющих возможность генерации  кода («WWWSQLDesigner» и «CodeUML») и для визуальных языков («Scratch» и «Pencilcode»), которые были разработаны для начинающих пользователей. По итогам обзора были выделены требования к разрабатываемому веб-редактору.
  3. В качестве платформы для разработки была выбранаJava, для разработки клиентской части приложения –HTML5,JavaScript и язык описания стилейCSS. Для разработки были использованы бесплатные инструменты – сред разработкиEclipse и серверTomcat. В качестве средства для визуализации конструкций выбранSVG.Raphael.js – библиотека дляSVG, была выбрана, т.к. осуществляет поддержку генерацииXML кода на большинстве браузеров, включая старые версии и позволяет более эффективно использоватьJavaScript для рисования.
  4. Для разработки интерпретатора был выбран язык преобразования текста в форматеXMLXSLT. Разработаны шаблоны для излечения информативных атрибутов из графических объектов.
  5. Выделенные функциональные требования для веб-редактора смоделированы с помощью нотацииUML.
  6. Разработан прототип веб-редактора для описания лексико-семантических шаблонов на визуальном языке. В нем реализованы функции создания объектов, их модификации. А так же создание новой диаграммы, ее сохранение на локальном компьютере  в виде файла в формате .xml и импорт существующей диаграммы с локального компьютера.

Результаты исследования были опубликованы в сборнике докладов всероссийской научно-практической конференции молодых ученых с международным участием «Математика и междисциплинарные исследования – 2016», в блоке «Искусственный интеллект и прикладная лингвистика».

Дальнейшая разработка будет направлена на расширение функциональности веб-редактора, добавление функций импорта уже созданной диаграммы (на языкеXML), добавление новых объектов для создания более сложных лексико-семантических шаблонов. Так же, на серверной части приложения будет создан модуль клиента веб-сервиса, который позволит сохранять диаграммы в облачном хранилище для дальнейшего использования при анализе текста системойSFTA. Для этих же целей будет добавлен модуль генерации кода изXML представления в текстовое представление языкаJAPE и обратно.

Список сокращений и условных обозначений

DOMDocumentObjectModel

ООПобъектно-ориентированноепрограммирование

GATE – General Architecture of Text Engineering

JAPE – Java Annotation Patterns Engine

SFTA – System for Text Analysis

SVG – Scalable Vector Graphics

XSLT - eXtensible Stylesheet Language Transformations

Библиографическийсписок

  1. «АОТ» – Автоматическая Обработка Текста [Электронный ресурс] URL: http://www.aot.ru/ (дата обращения 15.05.2016).
  2. WordSmith Tools – Windows software for finding word patterns // Lexical Analysis Software.2015. URL: http://www.lexically.net/wordsmith/ (датаобращения 15.05.2016).
  3. AntConc // Laurence Anthony's Website. URL:http://www.laurenceanthony.net/software/antconc/ (датаобращения 15.05.2016).
  4. GATE - General Architecture for Text Engineering. URL:https://gate.ac.uk (дата обращения 15.05.2016).
  5. JAPE: Regular Expressions over Annotations // GATE - General Architecture for Text Engineering. URL: https://gate.ac.uk/sale/tao/splitch8.html (дата обращения 21.05.2016).
  6. WWWSQLDesigner [Электронный ресурс]URL: http://ondras.zarovi.cz/sql/demo (дата обращения 21.05.2016).
  7. CodeUML [Электронный ресурс]URL:http://www.codeuml.com/ (дата обращения 21.05.2016).
  8. PencilCodeOnlineGuide [Электронный ресурс]URL:https://guide.pencilcode.net/ (дата обращения 21.05.2016).
  9. Scratch [Электронный ресурс]URL:https://scratch.mit.edu/ (дата обращения 21.05.2016).
  10. AboutVim // Vim.URL:http://www.vim.org/about.php (дата обращения 21.05.2016).
  11. Eclipsepedia  // Eclipse.URL:https://wiki.eclipse.org/Main_Page (дата обращения 21.05.2016).
  12. Хабибуллин И. Ш.Java 7. СПб.: БХВ-Петербург, 2012. 768c.: ил.(В подлиннике)ISBN 978-5-9775-0735-6.
  13. Fulton S., Fulton J. HTML5 Canvas. O’Reilly Media, Inc.Sebastopol., 2011.
  14. Scalable Vector Graphics (SVG) // World Wide Web Consortium (W3C). URL:https://www.w3.org/Graphics/SVG/ (датаобращения 25.05.2016).
  15. Aurora S. The 10 Best JavaScript Libraries for SVG Animation // Noeticforce URL:http://noeticforce.com/Javascript-libraries-for-svg-animation (датаобращения 25.05.2016).
  16. Raphaeljs [Электронный ресурс]URL: http://raphaeljs.com (дата обращения 22.04.2016).
  17. TIOBE Index for May 2016 // TIOBE. The Software Quality Company. URL:http://www.tiobe.com/tiobe_index (датаобращения 26.05.2016).
  18. Transforming XML Data with XSLT // Oracle. Integrated Cloud Applications and Platform Services. URL:https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html (дата обращения 26.04.2016).
  19. Бармина Е.И., Бушуев Р.Н., Котельникова Н.В., Ланин В.В., Плотникова О.А. Система для обработки корпусов текстов // Математика и междисциплинарные исследования – 2016 / под ред. Ю.А. Шарапова [и др.]. – Пермь. – 2016. – С. 245-250.

Приложение А. Грамматика языкаJAPE

Приложение Б. Диаграмма классов клиента

Приложение В. Функции соединения и перемещения объектов

connection=function(obj1, obj2, line, bg) {//соединитьдвефигурылинией

/*obj1 – объект, от которого начинается линия*/

/*obj2 – объект, к которому тянется линия*/

/*line – передается, если линия между объектами уже существует для ее перерисовки

при передвижении объектов по холсту*/

/*bg – цвет линии*/if(obj1.line&& obj1.from&& obj1.to        obj1 = line.from        obj2 = line.tovarbb1= obj1.getBBoxbb2= obj2.getBBox(),

/*p – набор точек, доступных для рисования одного из концов линии.P[0..3] – точки на первой фигуре,p[4..7] – на второй*/points= [{x:bb1.x+bb1.width/2,y:bb1.y-1            {x:bb1.x+bb1.width/2,y:bb1.y+bb1.height+1            {x:bb1.x-1,y:bb1.y+bb1.height/2            {x:bb1.x+bb1.width+1,y:bb1.y+bb1.height/2            {x:bb2.x+bb2.width/2,y:bb2.y-1            {x:bb2.x+bb2.width/2,y:bb2.y+bb2.height+1            {x:bb2.x-1,y:bb2.y+bb2.height/2            {x:bb2.x+bb2.width+1,y:bb2.y+bb2.height/2dist_points= {},//набор номеров точек, для которых посчитана дистанция

distances= [];/*набор дистанций между двумя точками с одной и второй фигуры*/

//i-ый элемент массиваd соответствует двум точкам для которых посчитана дистанция в массивеdis под тем же индексомfor(vari=0;i<4;ifor(varj=4;j<8;jvardx=Math.abs(points[i].x-points[j].xdy=Math.abs(points[i].y-points[j].yif((i==j-4) || (((i!=3&&j!=6) ||points[i].x<points[j].x)

&& ((i!=2&&j!=7) ||points[i].x>points[j].x) && ((i!=0

&&j!=5) ||points[i].y>points[j].y) && ((i!=1&&j!=4)

                 ||points[i].y<points[j].ydistances.push(dx+dydist_points[distances[distances.length-1]] = [i,j    }

varresult_points;if(distances.length==0)//еслилинияпроведенаотфигурыксамойсебеresult_points= [0,4];//линияизточкивсебяжеelseresulted_points=dist_points[Math.min.apply(Math,distances)];/*ищемдве

точкимеждукоторымиминимальнаядистанцияипомещаемв res*/varx1=points [res[0]].xy1=points [res[0]].yx4=points [res[1]].xy4=points [res[1]].y;//кординатыдлялинииdx=Math.max(Math.abs(x1-x4) /2,10dy=Math.max(Math.abs(y1-y4) /2,10varx2= [x1,x1,x1-dx,x1+dx][result_points[0]].toFixed(3y2= [y1-dy,y1+dy,y1,y1][result_points[0]].toFixed(3x3= [0,0,0,0,x4,x4,x4-dx,x4+dx][result_points[1]].toFixed(3y3= [0,0,0,0,y1+dy,y1-dy,y4,y4][result_points[1]].toFixed(3varpath= ["M",x1.toFixed(3),y1.toFixed(3),"C",x2,y2,x3,y3,

x4.toFixed(3),y4.toFixed(3)].join(","if(line && line.line        line.bg&& line.bg.attr({path:path        line.line.attr({path:path    }elsevarcolor=typeofline =="string"? line :"#000"returnbg: bg && bg.split&&this.path(path).attr({stroke: bg.split("|")[0],

 fill:"none","stroke-width": bg.split("|")[1] ||3line:this.path(path).attr({stroke:color,fill:"none",'stroke-

             width':2fromto};

varpreMoving=function() {//подготовкакперемещениюфигуры//извлечениеначальныхкоординатфигурыthis.ox=this.type=="ellipse"?this.attr("cx") :this.attr("x"this.oy=this.type=="ellipse"?this.attr("cy") :this.attr("y"if(this.type!="text")this.animate({"fill-opacity":.2},500/* извлечение начальных координат для группы фигур (фигура+текст внутри

this.pair.ox=this.pair.type=="ellipse"?this.pair.attr("cx") :

this.pair.attr("x"this.pair.oy=this.pair.type=="ellipse"?this.pair.attr("cy") :

this.pair.attr("y");

/*выделение перемещаемой фигуры*/if(this.pair.type!="text")this.pair.animate({"fill-opacity":.2},

500    };

varmove=function(dx, dy) {//перемещениефигуры//перемещениедляфигурыvaratt=this.type=="ellipse"? {cx:this.ox+ dx,cy:this.oy        {x:this.ox+ dx,y:this.oythis.attr(att//перемещениедлятекстаatt=this.pair.type=="ellipse"?{cx:this.pair.ox+ dx,cy:

this.pair.oy        {x:this.pair.ox+ dx,y:this.pair.oythis.pair.attr(att//перемещениесоединительнойлинииfor(vari=connections.length;ir.connection(connections[i    };

varpreMoving=postMoving=function() {// завершение перемещения фигуры

/*отмена выделения перемещаемой фигуры*/if(this.type!="text")this.animate({"fill-opacity":0},500if(this.pair.type!="text")this.pair.animate({"fill-opacity":0},500    };

Приложение Г. Функции соединения и перемещения объектов

<divid="svgout"priority="5"phase="g"rule="g"onclick="getEventElement()">

<svgxmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"height="760"version="1.1"

width="1000"style="overflow: hidden; position: relative;">

<textx="69"y="96"text-anchor="middle"font-family="&quot;Arial&quot;"

font-size="15px"stroke="none"fill="#008080"style="-webkit-tap-

highlight-color: rgba(0,0,0,0); text-anchor: middle; font-family:

Arial; font-size:15px; cursor: move;"ident="id_1464204194240"

stroke-width="2"indexInArray="5">

<tspandy="5.5"style="-webkit-tap-highlight-color: rgba(0,0,0,

0);">label</tspan>

</text>

<ellipsecx="69"cy="96"rx="22"ry="20"fill="#008080"stroke="#008080"

stroke-width="2"fill-opacity="0"indexInArray="5"style="-webkit-

tap-highlight-color: rgba(0,0,0,0); fill-opacity:0; cursor:

              move;"/>

<textx="437"y="216"text-anchor="middle"font-family="&quot;Arial&quot;"

font-size="15px"stroke="none"fill="#ff0000"style="-webkit-tap-

highlight-color: rgba(0,0,0,0); text-anchor: middle; font-family:

Arial; font-size:15px; cursor: move;"ident="id_1464204196259"

stroke-width="2"indexInArray="6">

<tspandy="216"style="-webkit-tap-highlight-color: rgba(0,0,0,0);"/>

</text>

<ellipsecx="437"cy="216"rx="20"ry="20"fill="#ff0000"stroke="#ff0000"

stroke-width="2"fill-opacity="0"indexInArray="6"style="-webkit-

tap-highlight-color: rgba(0,0,0,0); fill-opacity:0; cursor:

              move;"/>

<textx="424"y="96"text-anchor="middle"font-family="&quot;Arial&quot;"

font-size="15px"stroke="none"fill="#008000"style="-webkit-tap-

highlight-color: rgba(0,0,0,0); text-anchor: middle; font-family:

Arial; font-size:15px; cursor: move;"ident="id_1464204208843"

stroke-width="2"indexInArray="7">

<tspandy="5.5"style="-webkit-tap-highlight-color: rgba(0,0,0,

0);">TitleWithoutS</tspan>

</text>

<ellipsecx="424"cy="96"rx="60.625"ry="20"fill="#008000"

stroke="#008000"stroke-width="2"fill-opacity="0"indexInArray="7"

style="-webkit-tap-highlight-color: rgba(0,0,0,0); fill-opacity:

0; cursor: move;"/>

<textx="222.625"y="96"text-anchor="middle"font-

           family="&quot;Arial&quot;"font-size="15px"stroke="none"

fill="#0000ff"style="-webkit-tap-highlight-color: rgba(0,0,0,0);

           text-anchor: middle; font-family:Arial; font-size:15px; cursor:

           move;"stroke-width="2"indexInArray="8"ident="id_1464204248329">

<tspandy="5.5"style="-webkit-tap-highlight-color: rgba(0,0,0,

0);">Title</tspan>

</text>

<rectx="204"y="76"width="37.25"height="40"rx="10"ry="10"

fill="#0000ff"stroke="#0000ff"style="-webkit-tap-highlight-color:

           rgba(0,0,0,0); fill-opacity:0; cursor: move;"stroke-width="2"

fill-opacity="0"indexInArray="8"ident="id_1464204248325"

propertyName="majorType"propertyValue="Title"operation="=="

propertyType="String"/>

<textx="277"y="147"text-anchor="middle"font-family="&quot;Arial&quot;"

font-size="15px"stroke="none"fill="#000000"style="-webkit-tap-

highlight-color: rgba(0,0,0,0); text-anchor: middle; font-family:

Arial; font-size:15px; cursor: move;"stroke-width="2"

indexInArray="9"ident="id_1464204297594">

<tspandy="5.5"style="-webkit-tap-highlight-color: rgba(0,0,0,

0);">S</tspan>

</text>

     <rectx="204"y="76"width="37.25"height="40"rx="10"ry="10"

fill="#0000ff"stroke="#0000ff"style="-webkit-tap-highlight-color:

           rgba(0,0,0,0); fill-opacity:0; cursor: move;"stroke-width="2"

fill-opacity="0"indexInArray="8"ident="id_1464204248325"

propertyName="majorType"propertyValue="Title"operation="=="

propertyType="String"/>

<textx="273"y="221"text-anchor="middle"font-family="&quot;Arial&quot;"

font-size="15px"stroke="none"fill="#000000"style="-webkit-tap-

highlight-color: rgba(0,0,0,0); text-anchor: middle; font-family:

Arial; font-size:15px; cursor: move;"stroke-width="2"

indexInArray="10"ident="id_1464204303909">

<tspandy="5.5"style="-webkit-tap-highlight-color: rgba(0,0,0,

0);">s</tspan>

</text>

<rectx="268"y="201"width="10"height="40"rx="10"ry="10"fill="#0000bf"

stroke="#000000"style="-webkit-tap-highlight-color: rgba(0,0,0,0);

           fill-opacity:0; cursor: move;"stroke-width="2"fill-opacity="0"

indexInArray="10"ident="id_1464204303908"propertyName="undefined"

propertyValue="undefined"operation="undefined"

propertyType="undefined"/>

<pathfill="none"stroke="#000000"

d="M92.033,96C147.516,96,147.516,96,203,96"stroke-width="2"obj1="5"

id="id_1464204541973"indexInArray="4"obj2="8"style="-webkit-tap-

highlight-color: rgba(0,0,0,0);"/>

<pathfill="none"stroke="#000000"

d="M242.25,96C302.267,96,302.267,96,362.285,96"stroke-width="2"

obj1="8"id="id_1464204547859"indexInArray="5"obj2="7"style="-

webkit-tap-highlight-color: rgba(0,0,0,0);"/>

<pathfill="none"stroke="#000000"

d="M222.625,117C222.625,127,277,127,277,126"stroke-width="2"obj1="8"

id="id_1464204550854"indexInArray="6"obj2="9"style="-webkit-tap-

highlight-color: rgba(0,0,0,0);"/>

<pathfill="none"stroke="#000000"

d="M277,168C277,192,346.485,216,415.97,216"stroke-width="2"obj1="9"

id="id_1464204553419"indexInArray="7"obj2="6"style="-webkit-tap-

highlight-color: rgba(0,0,0,0);"/>

<pathfill="none"stroke="#000000"

d="M222.625,117C222.625,158.5,273,158.5,273,200"stroke-width="2"

obj1="8"id="id_1464204556176"indexInArray="8"obj2="10"style="-

webkit-tap-highlight-color: rgba(0,0,0,0);"/>

<pathfill="none"stroke="#000000"

d="M279,221C347.485,221,347.485,216,415.97,216"stroke-width="2"

obj1="10"id="id_1464204559458"indexInArray="9"obj2="6"style="-

webkit-tap-highlight-color: rgba(0,0,0,0);"/>

</svg>

</div>

Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке на http://mirrorref.ru


Похожие рефераты, которые будут Вам интерестны.

1. Автореферат Национальная специфика лексико-семантических полей «Средства передвижения» в русском и английском языках

2. Диссертация Национальная специфика лексико-семантических полей «Средства передвижения» в русском и английском языках

3. Разработка текстового редактора

4. Разработка простейшего графического редактора

5. Разработка веб-приложения для совместной работы группы экспертов над структурами семантических полей и визуализации этих структур

6. Разработка методов регистрации, описания и анализа экспериментальных данных

7. РАЗРАБОТКА И ОТЛАДКА ПРОГРАММ НА ЯЗЫКЕ ТУРБО-ПРОЛОГ

8. Разработка системы сбора статистики использования маркеров стиля в научных публикациях на английском языке

9. Настройка шаблонов поиска и подготовка печатных макетов карты

10. Построение ЭС с использованием неупорядоченных фактов (шаблонов) и различных типов условных элементов в антецедентах правил