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

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

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

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

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

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

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



Заключение

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

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

Рассмотрены существующие доступные средства для описания шаблонов на языке JAPE («Eclipse»и«Vim»). Однако ни один из этих редакторов не ориентирован на язык JAPE.Рассмотрены веб-редакторы для создания диаграмм, предоставляющих возможность генерации кода («WWWSQLDesigner» и«CodeUML») и для визуальных языков («Scratch» и «Pencilcode»), которые были разработаны для начинающих пользователей. По итогам обзора были выделены требования к разрабатываемому веб-редактору.

В качестве платформы для разработки была выбрана Java, для разработки клиентской части приложения - HTML5, JavaScript и язык описания стилей CSS. Для разработки были использованы бесплатные инструменты - сред разработки Eclipseи сервер Tomcat. В качестве средства для визуализации конструкций выбранSVG. Raphael.js - библиотека для SVG, была выбрана, т.к. осуществляет поддержку генерации XML кода на большинстве браузеров, включая старые версии и позволяет более эффективно использовать JavaScript для рисования.

Для разработки интерпретатора был выбран язык преобразования текста в формате XML- XSLT. Разработаны шаблоны для излечения информативных атрибутов из графических объектов.

Выделенные функциональные требования для веб-редактора смоделированы с помощью нотации UML.

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

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

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



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

DOM - DocumentObjectModel

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

GATE-General Architecture of Text Engineering

JAPE - Java Annotation Patterns Engine

SFTA - System for Text Analysis

SVG -Scalable Vector Graphics

XSLT - eXtensibleStylesheet Language Transformations



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

«АОТ» - Автоматическая Обработка Текста[Электронный ресурс]URL: http://www.aot.ru/ (дата обращения 15.05.2016).

WordSmith Tools - Windows software for finding word patterns // Lexical Analysis Software. 2015.URL: http://www.lexically.net/wordsmith/ (датаобращения 15.05.2016).

AntConc//LaurenceAnthony'sWebsite. URL: http://www.laurenceanthony.net/software/antconc/ (датаобращения 15.05.2016).

GATE - General Architecture for Text Engineering. URL: https://gate.ac.uk (датаобращения 15.05.2016).

JAPE: Regular Expressions over Annotations //GATE - General Architecture for Text Engineering. URL: https://gate.ac.uk/sale/tao/splitch8.html (датаобращения 21.05.2016).

WWWSQLDesigner[Электронный ресурс]URL: http://ondras.zarovi.cz/sql/demo (датаобращения 21.05.2016).

CodeUML[Электронный ресурс]URL: http://www.codeuml.com/ (дата обращения 21.05.2016).

PencilCodeOnlineGuide[Электронный ресурс]URL: https://guide.pencilcode.net/ (датаобращения 21.05.2016).

Scratch[Электронный ресурс]URL: https://scratch.mit.edu/ (дата обращения 21.05.2016).

AboutVim // Vim.URL: http://www.vim.org/about.php(дата обращения 21.05.2016).

Eclipsepedia // Eclipse.URL: https://wiki.eclipse.org/Main_Page(дата обращения 21.05.2016).

Хабибуллин И. Ш. Java 7. СПб.: БХВ-Петербург, 2012. 768 c.: ил._(В подлиннике) ISBN 978-5-9775-0735-6.

Fulton S., Fulton J. HTML5 Canvas._ O'Reilly Media, Inc._Sebastopol., 2011.

Scalable Vector Graphics (SVG)// World Wide Web Consortium (W3C). URL: https://www.w3.org/Graphics/SVG/ (датаобращения 25.05.2016).

Aurora S. The 10 BestJavaScript Libraries for SVG Animation// NoeticforceURL: http://noeticforce.com/Javascript-libraries-for-svg-animation (датаобращения 25.05.2016).

Raphaeljs[Электронный ресурс]URL: http://raphaeljs.com(дата обращения 22.04.2016).

TIOBEIndexforMay 2016// TIOBE. TheSoftwareQuality Company.URL: http://www.tiobe.com/tiobe_index (датаобращения 26.05.2016).

TransformingXMLDatawithXSLT// Oracle. Integrated Cloud Applications and Platform Services.URL:https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html (датаобращения 26.04.2016).

Бармина Е.И., Бушуев Р.Н., Котельникова Н.В., Ланин В.В., Плотникова О.А.Система для обработки корпусов текстов // Математика и междисциплинарные исследования - 2016 / под ред. Ю.А. Шарапова [и др.]. - Пермь. - 2016. - С. 245-250.



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



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



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

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

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

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

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

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

/* bg - цвет линии*/

if(obj1.line && obj1.from && obj1.to) {

line = obj1;

obj1 = line.from;

obj2 = line.to;

}

varbb1 = obj1.getBBox(),

bb2 = 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 / 2}],

dist_points= {}, //набор номеров точек, для которых посчитана дистанция

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

// i-ыйэлемент массива d соответствует двум точкам для которых посчитана дистанция в массиве disпод тем же индексом

for(vari = 0; i <4; i++) {

for(varj = 4; j <8; j++) {

vardx= Math.abs(points[i].x - points[j].x),

dy= Math.abs(points[i].y - points[j].y);

if((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].y))) {

distances.push(dx + dy);

dist_points[distances[distances.length- 1]] = [i, j];

}

}

}

varresult_points;

if (distances.length== 0)//если линия проведена от фигуры к самой себе

result_points= [0, 4];//линия из точки в себя же

else

resulted_points= dist_points[Math.min.apply(Math, distances)];/*ищемдве

точки между которыми минимальная дистанция и помещаемвres*/

varx1 = points[res[0]].x,

y1 = points[res[0]].y,

x4 = points[res[1]].x,

y4 = points[res[1]].y; //координаты для линии

dx = Math.max(Math.abs(x1 - x4) / 2, 10);

dy= Math.max(Math.abs(y1 - y4) / 2, 10);

varx2 = [x1, x1, x1 - dx, x1 + dx][result_points[0]].toFixed(3),

y2 = [y1 - dy, y1 + dy, y1, y1][result_points[0]].toFixed(3),

x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][result_points[1]].toFixed(3),

y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][result_points[1]].toFixed(3);

varpath = ["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});

} else {

varcolor = typeofline == "string" ? line : "#000";

return {

bg: bg&&bg.split&&this.path(path).attr({stroke: bg.split("|")[0],

fill: "none", "stroke-width": bg.split("|")[1] || 3}),

line: this.path(path).attr({stroke: color, fill: "none", 'stroke-

width': 2}),

from: obj1,

to: obj2

};

}

};

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+ dy} :

{x: this.ox+ dx, y: this.oy+ dy};

this.attr(att);

// перемещениедлятекста

att= this.pair.type== "ellipse" ? {cx: this.pair.ox+ dx, cy:

this.pair.oy+ dy} :

{x: this.pair.ox+ dx, y: this.pair.oy+ dy};

this.pair.attr(att);

// перемещениесоединительнойлинии

for (vari= connections.length; i--;) {

r.connection(connections[i]);

}

};

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

/*отменавыделенияперемещаемойфигуры*/

if(this.type!= "text") this.animate({"fill-opacity": 0}, 500);

if (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>

Размещено на Allbest.ru